/* Application shell: title bar on top, tool rail on the left.
   On phones the rail becomes a bottom bar, which is where thumbs are. */

.titlebar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fp-gap-m);
  padding: 0.6rem var(--fp-gap-m);
  background: var(--fp-surface);
  border-bottom: 1px solid var(--fp-border);
}

.titlebar__home { text-decoration: none; color: inherit; display: flex; flex-direction: column; min-width: 0; }
.titlebar__name {
  font-family: var(--fp-font-display);
  text-transform: var(--fp-brand-transform, none);
  letter-spacing: var(--fp-display-tracking, 0);
  color: var(--fp-accent);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titlebar__dates { color: var(--fp-muted); font-size: 0.8rem; }
.titlebar__actions { display: flex; align-items: center; gap: 0.35rem; }

.inline { display: inline; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-s);
  background: var(--fp-surface-2);
  color: var(--fp-fg);
  text-decoration: none;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.iconbtn:hover { border-color: var(--fp-accent); }

.toolbar {
  position: fixed;
  top: 3.4rem;
  left: 0;
  bottom: 0;
  width: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--fp-gap-s);
  background: var(--fp-surface);
  border-right: 1px solid var(--fp-border);
  overflow-y: auto;
}

.toolbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.25rem;
  border-radius: var(--fp-radius-s);
  color: var(--fp-fg);
  text-decoration: none;
  font-size: 0.68rem;
  text-align: center;
}
.toolbar__item:hover { background: var(--fp-surface-2); }
.toolbar__item.is-active { background: var(--fp-surface-2); box-shadow: inset 2px 0 0 var(--fp-accent); }
.toolbar__icon { position: relative; font-size: 1.3rem; line-height: 1; }
.toolbar__label { line-height: 1.1; }

.dot {
  position: absolute;
  top: -0.15rem;
  right: -0.4rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--fp-danger);
  box-shadow: 0 0 0 2px var(--fp-surface);
}

body:has(.toolbar) .content { margin-left: 5.5rem; }

.blocks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--fp-gap-s); }
.block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fp-gap-m);
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--fp-border);
  border-left: 3px solid var(--fp-accent);
  border-radius: var(--fp-radius-s);
  background: var(--fp-surface-2);
}
.block--poll { border-left-color: var(--fp-ok); }
.block--change { border-left-color: var(--fp-muted); }
.block__text { flex: 1 1 14rem; }

.qr { background: #fff; padding: 0.5rem; border-radius: var(--fp-radius-s); max-width: 220px; }

@media (max-width: 760px) {
  .toolbar {
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
    flex-direction: row;
    justify-content: space-around;
    border-right: none;
    border-top: 1px solid var(--fp-border);
    padding-bottom: calc(var(--fp-gap-s) + env(safe-area-inset-bottom, 0px));
  }
  .toolbar__item.is-active { box-shadow: inset 0 2px 0 var(--fp-accent); }
  body:has(.toolbar) .content { margin-left: 0; padding-bottom: 5.5rem; }
}

/* Who-brings-what matrix */
.tablewrap { overflow-x: auto; }
.grid--matrix th, .grid--matrix td { white-space: nowrap; }
.grid--matrix th.is-placeholder { opacity: 0.75; font-style: italic; }
.sticky-col {
  position: sticky;
  left: 0;
  background: var(--fp-surface);
  z-index: 1;
  text-align: left;
}
.sticky-col .hint { display: block; font-weight: 400; }
.cellform { display: flex; gap: 0.2rem; align-items: center; }
.cellinput { width: 4.5rem; padding: 0.3rem; }
.cellunit { width: auto; padding: 0.3rem; }
.cellsave {
  border: 1px solid var(--fp-border);
  background: var(--fp-surface-2);
  color: var(--fp-fg);
  border-radius: var(--fp-radius-s);
  padding: 0.25rem 0.45rem;
  cursor: pointer;
}
.cellsave:hover { border-color: var(--fp-accent); }
.total { font-weight: 700; color: var(--fp-accent); }
.hint--tiny { font-size: 0.7rem; }
.log { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; font-size: 0.9rem; }

/* Car sharing */
/* Every car card the same height, not just the ones that share a row.
   A CSS grid sizes each ROW to its tallest item, so two cars side by side
   matched but a third on the next row came out shorter — which is exactly
   what it looked like. grid-auto-rows: 1fr makes all rows equal instead. */
.cars {
  display: grid; gap: var(--fp-gap-m);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  grid-auto-rows: 1fr;
}
.car { display: flex; flex-direction: column; }
/* The generic ".card + .card { margin-top }" is for cards STACKED in a
   column; inside a grid the gap already does that spacing, and the stray
   margin pushed every card except the first one 16px down — which is what
   made the boxes look unequal. */
.cars > .card + .card { margin-top: 0; }
/* The buttons sit at the bottom edge of every card, so the row of actions
   lines up across cards even when one car has more passengers than another. */
.car__actions { margin-top: auto; padding-top: var(--fp-gap-s); }
.car.is-over { outline: 2px dashed var(--fp-accent); outline-offset: 3px; }
.car--red .car--black .car--white .car--blue .car--green .car--yellow .car--orange .car--purple .name--draggable { cursor: grab; }
.name--draggable.is-dragging { opacity: 0.45; }
.name--driver { border-color: var(--fp-accent); }
.name--free { opacity: 0.5; border-style: dashed; }
.linkbtn { background: none; border: none; color: var(--fp-muted); cursor: pointer; font: inherit; padding: 0 0.15rem; }
.linkbtn:hover { color: var(--fp-danger); }
.map { height: 22rem; border-radius: var(--fp-radius-s); border: 1px solid var(--fp-border); }
.leaflet-container { background: var(--fp-surface-2); }

/* Polls, chat, forum */
.option { display: flex; align-items: center; gap: var(--fp-gap-s); flex-wrap: wrap; padding: 0.35rem 0; }
.option input { width: auto; }
.option__label { flex: 1 1 10rem; }
.option__count { font-weight: 700; color: var(--fp-accent); min-width: 1.5rem; text-align: right; }
.messages { list-style: none; padding: 0; margin: 0 0 var(--fp-gap-m); display: grid; gap: var(--fp-gap-s); max-height: 60vh; overflow-y: auto; }
.message { border: 1px solid var(--fp-border); border-radius: var(--fp-radius-s); padding: 0.5rem 0.7rem; background: var(--fp-surface-2); }
.message--mine { border-left: 3px solid var(--fp-accent); }
.message__body p { margin: 0.25rem 0; }
.message__body code { font-size: 0.9em; }
.mention { color: var(--fp-accent); font-weight: 600; }
.mention--all { text-decoration: underline; }
textarea { min-height: 4rem; resize: vertical; }

/* Monochrome toolbar icons. They inherit currentColor so the active state and
   every theme recolour them for free — the point of dropping emoji. */
.icon { width: 22px; height: 22px; display: block; }
.toolbar__icon .icon { margin: 0 auto; }

/* Countdown: the first thing you want to know on the dashboard is how long
   until you leave, so it is one big number and nothing else. */
.countdown { text-align: center; padding: 1.1rem 1rem; }
.countdown__number {
  font-size: 2.6rem; line-height: 1; font-weight: 700;
  color: var(--fp-accent); margin: 0;
}
.countdown__label { margin: .35rem 0 0; color: var(--fp-muted); }

/* Reveal-on-click forms. A <details> needs no JavaScript, is keyboard and
   screen-reader friendly, and the summary IS the small button that was asked
   for: fields appear only after a click. */
.reveal > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::marker { content: ""; }
.reveal[open] > summary { margin-bottom: .6rem; }
.reveal > form { border-left: 2px solid var(--fp-border); padding-left: .7rem; }
.reveal--inline { display: inline-block; }
.btn--small { padding: .25rem .55rem; font-size: .85rem; }
.reveal > summary .icon { width: 16px; height: 16px; }


.pill {
  display: inline-block; padding: .05rem .4rem; border-radius: 999px;
  border: 1px solid var(--fp-border); font-size: .8rem;
}
.pill--full { border-color: var(--fp-accent); color: var(--fp-accent); }
.pill--free { border-color: #2f8f4e; color: #3ba75f; }

.checks { list-style: none; margin: .3rem 0; padding: 0; }
.check { display: flex; align-items: center; gap: .4rem; }
.meetpoint { padding: .5rem 0; border-top: 1px solid var(--fp-border); }
.meetpoint:first-of-type { border-top: 0; }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding: .5rem 0 0; margin: 0; }
.legend__item { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.legend__swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.35); }
.legend__swatch--meet { background: transparent; border: 2px dashed var(--fp-muted); }


/* Click-to-edit cell: the value is a summary, the input appears on click. */
.cell > summary { cursor: pointer; list-style: none; }
.cell > summary::-webkit-details-marker { display: none; }
.cell > summary::marker { content: ""; }
.cell__value { display: inline-block; min-width: 2.2rem; }
.cell[open] > summary { color: var(--fp-accent); }
.grid--matrix tfoot th, .grid--matrix tfoot td {
  border-top: 2px solid var(--fp-border); font-weight: 600;
}

/* Poll result bars. Width as a class, not an inline style: the CSP
   forbids inline styles and drops them without a word. */
.bar { display: inline-block; height: 8px; border-radius: 4px;
       background: var(--fp-border); min-width: 2px; }
.bar--leading { background: var(--fp-accent); }
.option { display: grid; grid-template-columns: auto 1fr 5rem 2.5rem; gap: .5rem;
          align-items: center; }
.optionfield { display: block; width: 100%; margin-bottom: .35rem; }
.bar--0 { width: 0%; }
.bar--1 { width: 10%; }
.bar--2 { width: 20%; }
.bar--3 { width: 30%; }
.bar--4 { width: 40%; }
.bar--5 { width: 50%; }
.bar--6 { width: 60%; }
.bar--7 { width: 70%; }
.bar--8 { width: 80%; }
.bar--9 { width: 90%; }
.bar--10 { width: 100%; }

/* A link the admin has to copy by hand: must wrap, must be selectable. */
.copybox {
  display: block; padding: .5rem; border: 1px solid var(--fp-border);
  border-radius: 6px; word-break: break-all; user-select: all;
  background: var(--fp-input-bg, transparent);
}

/* Expenses */
.balance { display: flex; align-items: baseline; gap: .5rem; margin: .2rem 0 .8rem; }
.balance__net { font-size: 1.8rem; font-weight: 700; }
.balance__net--plus { color: #3ba75f; }
.balance__net--minus { color: var(--fp-accent); }
.debts, .expenses, .shares { list-style: none; margin: .3rem 0; padding: 0; }
.debt { display: flex; justify-content: space-between; align-items: center;
        gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--fp-border); }
.debt--waiting { opacity: .75; }
.expense { padding: .5rem 0; border-bottom: 1px solid var(--fp-border); }
.expense--settled { opacity: .55; }
.shares { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .9rem; }
.share--confirmed { text-decoration: line-through; opacity: .6; }
.exactfield { width: 6.5rem; }

/* Countdown in the title bar: a small number beside the dates, not a card. */
.titlebar__countdown {
  display: inline-block; margin-left: .4rem; padding: .02rem .4rem;
  border-radius: 999px; border: 1px solid var(--fp-accent);
  color: var(--fp-accent); font-size: .78rem; white-space: nowrap;
}

/* --- Car icon -------------------------------------------------------------
   A small car silhouette whose LENGTH is the seat count (which is why there
   is no vehicle-type picker any more). Every value is a class, never an
   inline style: the CSP says style-src 'self' and drops inline styles without
   a word. */
.carbar { position: relative; display: inline-block; height: 26px; flex: 0 0 auto; }
.carbar__body {
  position: absolute; left: 0; right: 0; bottom: 4px; height: 11px;
  border-radius: 4px 7px 3px 3px;
  background: var(--car-paint); border: 1.5px solid var(--car-line);
}
.carbar__roof {
  position: absolute; left: 22%; right: 20%; bottom: 13px; height: 9px;
  border-radius: 6px 7px 0 0;
  background: var(--car-paint); border: 1.5px solid var(--car-line);
  border-bottom: 0;
}
.carbar__window {
  position: absolute; bottom: 15px; height: 6px; width: 20%;
  background: var(--car-glass); border-radius: 2px;
}
.carbar__window--front { right: 23%; }
.carbar__window--rear { left: 25%; }
.carbar__wheel {
  position: absolute; bottom: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #141418; border: 1.5px solid var(--car-line);
}
.carbar__wheel--front { right: 12%; }
.carbar__wheel--rear { left: 12%; }
.carbar--full { opacity: .55; }
.car__from { font-weight: 400; color: var(--fp-muted); }

.carbar--seats-1 { width: 34px; }
.carbar--seats-2 { width: 50px; }
.carbar--seats-3 { width: 66px; }
.carbar--seats-4 { width: 82px; }
.carbar--seats-5 { width: 98px; }
.carbar--seats-6 { width: 114px; }
.carbar--seats-7 { width: 130px; }
.carbar--seats-8 { width: 146px; }
.carbar--seats-9 { width: 162px; }

/* Paint, outline and glass per colour. The OUTLINE FLIPS with the paint —
   light line on a dark car, dark line on a light car — so a black car stays
   visible on the dark themes and a white one on the light theme. */
.carcolor--red { --car-paint: #c81f2a; --car-line: rgba(255,255,255,.85); --car-glass: rgba(255,255,255,.35); }
.legend__swatch.carcolor--red { background: #c81f2a; }
.carcolor--black { --car-paint: #15161a; --car-line: rgba(255,255,255,.85); --car-glass: rgba(255,255,255,.35); }
.legend__swatch.carcolor--black { background: #15161a; }
.carcolor--white { --car-paint: #f1efeb; --car-line: rgba(0,0,0,.75); --car-glass: rgba(0,0,0,.28); }
.legend__swatch.carcolor--white { background: #f1efeb; }
.carcolor--silver { --car-paint: #c9ccd1; --car-line: rgba(0,0,0,.75); --car-glass: rgba(0,0,0,.28); }
.legend__swatch.carcolor--silver { background: #c9ccd1; }
.carcolor--grey { --car-paint: #7c8088; --car-line: rgba(0,0,0,.75); --car-glass: rgba(0,0,0,.28); }
.legend__swatch.carcolor--grey { background: #7c8088; }
.carcolor--blue { --car-paint: #2563c8; --car-line: rgba(255,255,255,.85); --car-glass: rgba(255,255,255,.35); }
.legend__swatch.carcolor--blue { background: #2563c8; }
.carcolor--green { --car-paint: #2f8f4e; --car-line: rgba(0,0,0,.75); --car-glass: rgba(0,0,0,.28); }
.legend__swatch.carcolor--green { background: #2f8f4e; }
.carcolor--yellow { --car-paint: #e0bb28; --car-line: rgba(0,0,0,.75); --car-glass: rgba(0,0,0,.28); }
.legend__swatch.carcolor--yellow { background: #e0bb28; }
.carcolor--orange { --car-paint: #e07a1f; --car-line: rgba(0,0,0,.75); --car-glass: rgba(0,0,0,.28); }
.legend__swatch.carcolor--orange { background: #e07a1f; }
.carcolor--purple { --car-paint: #7b3fbf; --car-line: rgba(255,255,255,.85); --car-glass: rgba(255,255,255,.35); }
.legend__swatch.carcolor--purple { background: #7b3fbf; }

/* The dashboard one-liner: wraps on a phone instead of scrolling sideways. */
.oneliner { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.oneliner__item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.oneliner__item svg { width: 1.05rem; height: 1.05rem; }
.oneliner__sep { color: var(--fp-muted); }
.oneliner__item--days { color: var(--fp-accent); font-weight: 600; }

/* Balance, one line per person. */
.balance__people { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.balance__people li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.balance__net--plus { color: var(--fp-ok); }
.balance__net--minus { color: var(--fp-warn); }

/* Bring-list matrix: tighter columns with a grey rule between them.
   The items are short words, so the default table padding spread them so far
   apart that a phone showed two columns and a lot of nothing. The vertical
   line does the separating that the whitespace used to. */
/* The matrix shrinks to its content instead of filling the card.
   ".grid { width: 100% }" was the real cause of the wide gaps: the table
   stretched to the full width and handed the leftover space to the columns,
   so trimming cell padding barely moved anything. Items are short words; the
   table should be as narrow as they are and simply end. */
.grid--matrix { width: auto; }
.grid--matrix th, .grid--matrix td { padding-left: .35rem; padding-right: .35rem; }
/* A rule between every pair of neighbouring cells, INCLUDING the one between
   the names column and the first item — that edge is a th followed by a td,
   so the td + td rule alone skipped exactly the line you notice most. */
.grid--matrix thead th + th,
.grid--matrix tbody th + td,
.grid--matrix tbody td + td,
.grid--matrix tfoot th + td,
.grid--matrix tfoot th + th,
.grid--matrix tfoot td + td { border-left: 1px solid var(--fp-border); }
.grid--matrix thead th { font-size: .86rem; line-height: 1.15; vertical-align: bottom; }
/* The first column (the names) keeps its breathing room: it is the only
   column with long text in it. */
.grid--matrix .sticky-col { padding-left: .5rem; padding-right: .7rem; }

/* Status pills on the balance lines. */
.pill--owe { border-color: var(--fp-warn); color: var(--fp-warn); }