/* SPACING: reach for a token — `--card-pad`, `--card-gap`, `--sp-1`…`--sp-6` —
   not a raw rem, and not the value in the rule above. Cards on the padding
   contract are enforced by `test/layout-tokens.test.js`; the contract and the
   list of what is on it are in `docs/visual-language.md` → Tokens. Raw values
   still in this file are legacy from a 2px grid, not a precedent to follow. */
/* Base: planner, item rows, charts and legends, admin, modals, budget, narrow-window rules. */
/* Planner */
.trip-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.25rem;
  margin-bottom:1.25rem;
}
.trip-head{
  display:flex;
  gap:var(--sp-3);
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.trip-head .trip-name{
  font-size:var(--fs-body);
  font-weight:600;
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:0.5625rem 0.8125rem;
  min-width:13.75rem;
  flex:1;
}
.trip-name-display{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:13.75rem;}
.trip-name-text{font-size:var(--fs-body);font-weight:600;padding:0.5625rem 2px;}
.trip-when{display:flex;gap:var(--sp-2);align-items:center;}
.trip-when select{width:7.5rem;}
.trip-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:1.375rem;align-items:start;}
@media(max-width:760px){
  .trip-grid{grid-template-columns:1fr;}
}
.trip-items .trip-item{
  display:grid;
  grid-template-columns:1fr 130px auto;
  gap:0.5625rem;
  margin-bottom:var(--sp-2);
  align-items:center;
}
.trip-items input{
  background:var(--input-bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:0.5625rem 0.6875rem;
  font-size:var(--fs-body);
  width:100%;
  box-sizing:border-box;
}
/* Expense/income item rows use the same flexible-name/fixed-amount layout as
   Trip Planner's items, so the row spans the same width as the Description
   field above/below it while Amount and the remove button stay compact. */
/* Edit-row items block (inside the table) stays a sensible fixed width. */
#ee-items-list-wrap.items-narrow{max-width:520px;}
.trip-additem{
  background:transparent;
  border:1px dashed var(--border);
  color:var(--muted);
  border-radius:var(--radius-sm);
  padding:var(--sp-2);
  width:100%;
  cursor:pointer;
  font-size:var(--fs-body);
  transition:border-color .15s,color .15s;
}
.trip-additem:hover{border-color:var(--accent);color:var(--accent);}
.trip-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--border);
  margin-top:0.625rem;
  padding-top:var(--sp-3);
  font-size:var(--fs-body);
}
.trip-total b{color:var(--neg);font-size:var(--fs-figure);}
.plan-tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:0.875rem;}
.plan-tile{background:var(--surface2);border-radius:var(--radius);padding:var(--sp-3) 0.875rem;}
.plan-tile .l{
  font-size:var(--fs-meta);
  color:var(--muted);
  font-weight:500;
  margin-bottom:var(--sp-1);
}
.plan-tile .v{font-size:var(--fs-figure);font-weight:600;font-variant-numeric:tabular-nums;}
.verdict{border-radius:var(--radius);padding:0.875rem var(--sp-4);}
.verdict .v-head{
  display:flex;
  align-items:center;
  gap:0.5625rem;
  font-size:var(--fs-body);
  font-weight:600;
  margin-bottom:var(--sp-2);
}
.verdict .v-body{font-size:var(--fs-body);line-height:1.55;color:var(--text);}
.verdict.ok{background:var(--tint-green);border:1px solid color-mix(in srgb,var(--chart-pos) 40%,var(--border));}
.verdict.ok .v-head{color:var(--pos);}
.verdict.warn{background:var(--tint-amber);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));}
.verdict.warn .v-head{color:var(--accent);}
.verdict.bad{background:var(--tint-red);border:1px solid color-mix(in srgb,var(--chart-neg) 40%,var(--border));}
.verdict.bad .v-head{color:var(--neg);}
.bal-rows{margin:var(--sp-3) 0 2px;display:flex;flex-direction:column;gap:0.4375rem;}
.bal-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:var(--fs-body);
  border-bottom:1px solid var(--border);
  padding-bottom:0.4375rem;
}
.bal-row:last-child{border-bottom:none;}
.bal-row .bv{font-weight:600;font-variant-numeric:tabular-nums;}
.trip-pie-wrap{margin-top:0.875rem;}
.trip-actions,.entry-edit-fields{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;}
.trip-when-label{font-size:var(--fs-body);font-weight:600;color:var(--text);padding:var(--sp-1) 2px;}
.trip-buffer-val{font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;}
.trip-costs-empty{color:var(--muted);font-size:var(--fs-body);padding:0.625rem 2px;}
/* Custom dropdown chevron, inset from the right edge */
.modal select,.trip-when select{
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:11px;
  padding-inline-end:2.625rem;
}
:root[dir="rtl"] .modal select,:root[dir="rtl"] .trip-when select{background-position:left 14px center;}
.chart-wrap{position:relative;}
/* Boxed chart legend (color glossary) shown beneath each chart */
.chart-legend{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.375rem;
  margin-top:var(--sp-4);
  padding:0.6875rem 1.125rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface2);
}
.chart-legend .lg-item{
  display:flex;
  align-items:center;
  gap:0.5625rem;
  font-size:var(--fs-label);
  color:var(--muted);
  font-weight:500;
}
/* Items breakdown legend entries are clickable — toggle a label out of the pie
   chart (e.g. hide a big item to see how the smaller ones compare). */
.cat-items-lg-item{
  cursor:pointer;
  user-select:none;
  border-radius:var(--radius-sm);
  padding:2px 0.375rem;
  margin:-2px -0.375rem;
  transition:background .12s,opacity .12s;
}
/* A theme surface, not a white wash — the latter was invisible on light. */
.cat-items-lg-item.excluded{opacity:0.4;text-decoration:line-through;}
/* Budget section */
.budget-set-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-4);}
@media(max-width:700px){
  .budget-set-list{grid-template-columns:1fr;}
}
.budget-row{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:border-color .18s,background .18s;
}
.budget-row.set{border-color:transparent;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tile-edge);}
.budget-val{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
.budget-cat-name{flex:1;font-size:var(--fs-body);}
.budget-input-wrap{display:flex;align-items:center;gap:0.375rem;color:var(--muted);font-size:var(--fs-body);}
.budget-input-wrap input{
  width:7.5rem;
  background:var(--input-bg);
  border:1.5px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:0.4375rem 0.625rem;
  font-size:var(--fs-body);
  outline:none;
  transition:border-color .15s;
}
.budget-input-wrap input:focus{border-color:var(--accent);}
.danger-zone{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--border);}
::-webkit-scrollbar{width:0.375rem;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
/* ── App font: Quicksand (variable) for UI text; Heebo (variable) for description
   text and as per-glyph fallback for Hebrew, which Quicksand lacks. ── */
/* font-family only. This rule used to carry `font-weight:400` too,
   which silently flattened every weight in the stylesheet that wasn't itself
   !important — total badges asked for 700, category pills and the right-click
   menu for 600, and all of them rendered at 400. The base weight now comes from
   body and inherits, so a declared weight actually applies. */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Quicksand','Heebo','Segoe UI',system-ui,sans-serif !important;
}