/*
 * NotMeal design system: dark only, mobile first, glass cards — the legacy app
 * as the owner used it every day. Tokens on :root, components as classes;
 * the rules of the skill `.claude/skills/design-system` govern additions.
 */

:root {
  --bg: #000000;
  --text: #f7f9fb;
  --dim: #bcc5d0;
  --faint: #aeb7c2;
  --mint: #fefefe;
  --mint-ink: #000000;
  --coral: #ff9a8f;
  --border: rgba(255, 255, 255, 0.14);
  --line: rgba(255, 255, 255, 0.1);
  --track: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(10, 13, 17, 0.7);
  --glass-strong: rgba(8, 11, 15, 0.74);
  --input-bg: rgba(255, 255, 255, 0.06);
  --font: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 22px;
  --radius-input: 14px;
  --tap: 44px;
  --photo: 200px;
  --space: 16px;
  --shell-max: 430px;
  --tabs: 72px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); overscroll-behavior: none; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Frame: one column, phone width, safe areas respected. */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: calc(var(--space) + env(safe-area-inset-top)) var(--space) calc(var(--tabs) + var(--space) + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  .shell { max-width: 820px; }
}

body.centered .shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Flash */
.flash {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--glass-strong);
  padding: 12px 16px;
  margin-bottom: var(--space);
  font-size: 14px;
  color: var(--dim);
}

.flash--alert { border-color: rgba(255, 154, 143, 0.5); color: var(--coral); }

/* Glass card */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 18px 20px;
  margin-bottom: var(--space);
}

.card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}

.card__empty { font-size: 13px; color: var(--faint); padding: 12px 0 4px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform 120ms ease;
}

.btn:active { transform: scale(0.98); }
.btn--mint { background: var(--mint); color: var(--mint-ink); }
.btn--big { width: 100%; height: 54px; font-size: 16px; }
.btn--ghost { background: var(--input-bg); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text); }
.btn--small { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* A button that is a glyph and nothing else: a square tap target around it. */
.btn--icon { width: var(--tap); padding: 0; flex: none; }
.icon { width: 22px; height: 22px; flex: none; }

/* Inputs */
.input {
  width: 100%;
  min-width: 0;
  height: 50px;
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  padding: 0 14px;
}

.input::placeholder { color: #7c8794; }
.input:focus { outline: none; border-color: rgba(254, 254, 254, 0.5); }

/* Hairline rows. `min-width: 0` on the body is what lets a long title shorten
   with an ellipsis instead of pushing the row past a 320px screen. */
.rows { border-bottom: 1px solid var(--line); }

.row {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 8px 0;
}

.row__body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.row__title { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.row__pin { font-size: 12px; color: var(--faint); }

/* Badges; as a button it keeps the tap target without growing visually. */
.tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px 7px;
  color: var(--dim);
  white-space: nowrap;
  background: transparent;
}

.tag--button { min-height: 32px; min-width: var(--tap); cursor: pointer; flex: none; }

/* Pin: the button that lifts a row into the block above the status ones. It is
   dim until it is on, and keeps a full tap target around a small glyph. */
.pin {
  flex: none;
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.3;
}

.pin--on { opacity: 1; }

/* Screen header */
.screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 var(--space);
}

.screen-head__title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* Sign-in and enrollment */
.auth { display: flex; flex-direction: column; gap: var(--space); }
.auth__head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 8px; text-align: center; }
.auth__logo { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
.auth__tagline { font-size: 14px; color: var(--dim); }

.screen-head__actions { display: flex; gap: 8px; flex: none; }
.screen-head__actions form { margin: 0; }

/* Place rows: the gallery when there is one, the facts underneath. */
.row--place { flex-wrap: wrap; align-items: flex-start; }

/* Gallery: one photo per swipe, the next one peeking so the thumb knows to swipe. */
.gallery { width: 100%; display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
/* The height is fixed and `min-height: 0` set: a flex item otherwise keeps a photo's natural height. */
.gallery__photo { flex: 0 0 88%; width: 88%; height: var(--photo); min-height: 0; object-fit: cover; border-radius: var(--radius-input); scroll-snap-align: start; background: var(--input-bg); }
.gallery__photo:only-child { flex-basis: 100%; width: 100%; }
.row--place .row__body { flex: 1 1 0; flex-direction: column; align-items: stretch; gap: 2px; }
.row--place .row__title { white-space: normal; }
.row__meta { font-size: 12px; color: var(--faint); }
.row__text { font-size: 13px; color: var(--dim); white-space: pre-line; }
.row__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.row__pin { font-size: 12px; color: var(--faint); min-height: 28px; display: inline-flex; align-items: center; }

/* Kind filter: one scrolling line of chips, never a second row. */
.chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--space)) var(--space); padding: 0 var(--space); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); color: var(--faint); font-size: 12px; font-weight: 600; }
.chip--on { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }

/* Map screen: the map is the whole viewport above the tabs; the head, the buttons and the cards float over it. */
.map { position: fixed; inset: 0; display: flex; flex-direction: column; padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); }
.map__canvas { position: absolute; inset: 0; background: #000000; }
/* The head takes the free height, so everything after it sits at the bottom; its title stays at the top of it. */
.map__head { position: relative; z-index: 500; flex: 1 1 auto; align-items: flex-start; padding: calc(env(safe-area-inset-top) + 8px) var(--space) 0; pointer-events: none; }
.map__head .btn { pointer-events: auto; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); background: var(--glass-strong); }
/* The head and the bar float over the whole map, so only their buttons may take a tap — the rest belongs to the dots. */
.map__bar { position: relative; z-index: 500; display: flex; gap: 8px; justify-content: flex-end; padding: 0 var(--space) 10px; pointer-events: none; }
.map__bar .btn { backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); background: var(--glass-strong); pointer-events: auto; }
.map__bar .btn--mint { background: var(--mint); color: var(--mint-ink); }
/* The brush painting the fog back on: coral, the colour of undoing. */
.map__bar .btn--coral { background: var(--coral); color: var(--mint-ink); }
/* The fog canvas covers the map it rides on and never takes a tap — until the
   brush is up, when a finger on it draws instead of dragging the map. */
.fog { position: absolute; inset: 0; pointer-events: none; }
.fog--brush { pointer-events: auto; touch-action: none; cursor: crosshair; }

/* A place on the map. The dot is its own tap target and no wider: camps 300 m
   apart already touch here, and a box around each would swallow its neighbour.
   It carries a name of its own — under `.pin` it took the 44 px of the row's
   pin button and covered the ground it is there to point at. */
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--bg); background: var(--mint); }
.dot--on { background: var(--coral); }

/* Where he is now: the dot, the ring of how sure the fix is, and the arrow of
   where he is going. The marker is aligned to the map, so turning the map turns
   all three with the ground. */
.here { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mint); background: var(--coral); }
.here::before { content: ""; position: absolute; top: 50%; left: 50%; width: var(--accuracy, 0); height: var(--accuracy, 0); transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--coral); background: rgba(255, 154, 143, 0.12); }
.here::after { content: "\25b2"; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; color: var(--coral); font-size: 11px; line-height: 1; }
.here--still::after { content: none; }

/* MapLibre's own chrome, in the system: the attribution is a thin line along the
   bottom edge and the compass is glass, like the buttons it shares the map with. */
.maplibregl-map { font-family: var(--font); background: var(--bg); }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }
.maplibregl-ctrl-attrib { background: rgba(0, 0, 0, 0.5); border-radius: 0; }
.maplibregl-ctrl-attrib-inner, .maplibregl-ctrl-attrib-inner a { color: var(--faint); font-size: 9px; }
/* The compass sits under the head, clear of its title. */
.maplibregl-ctrl-top-right { top: calc(env(safe-area-inset-top) + 48px); }
.maplibregl-ctrl-group { background: var(--glass-strong); backdrop-filter: blur(20px); border-radius: var(--radius-input); box-shadow: none; border: 1px solid var(--border); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

/* The card of the dot he tapped, at the bottom of the map and nowhere else by default. */
.map__cards { position: relative; z-index: 500; padding: 0 var(--space) 10px; }
/* The card carries its own display, so hiding it takes more than the `hidden` attribute alone. */
.map__cards .strip__card[hidden] { display: none; }

/* A swipeable row of cards, one card per swipe. */
.strip { position: relative; z-index: 500; display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--space) 10px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip__card { flex: 0 0 82%; overflow: hidden; scroll-snap-align: center; display: flex; flex-direction: column; gap: 2px; margin-bottom: 0; }
.strip__photo { width: 100%; height: 140px; min-height: 0; flex: none; object-fit: cover; border-radius: var(--radius-input); margin-bottom: 6px; background: var(--input-bg); }
.strip__card .row__title { white-space: normal; }

/* Agent-written widgets: a stat is one big number, cards ride a strip. */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.stat__caption { font-size: 13px; color: var(--faint); }
.widget { margin-bottom: var(--space); }
/* The two screens the app has, and the only navigation between them: a pill
   floating at the bottom, a glyph per screen, the way a phone does it. */
.tabs {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.tabs__link { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--faint); }
.tabs__link--on { background: var(--input-bg); color: var(--text); }

/* The day's plan: a square box to tap done, a title that wraps instead of
   overflowing its row — the legacy button shrank the type to fit and still lost. */
.todo { align-items: flex-start; }
.todo form { flex: none; }
.todo__box { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); color: var(--mint-ink); cursor: pointer; }
.todo--done .todo__box { background: var(--mint); border-color: var(--mint); }
.todo__title { flex: 1 1 0; min-width: 0; padding-top: 12px; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.todo--done .todo__title { color: var(--faint); text-decoration: line-through; }
.todo__add { display: flex; gap: 8px; margin-top: 12px; }
.todo__add .input { flex: 1 1 0; }

/* The month of hours: seven columns, a day's fill is its share of the target,
   the tapped day is lit, today is ringed. The card's side padding is trimmed
   so seven cells stay tap-sized on an SE. */
.cal { padding-left: 12px; padding-right: 12px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal__month { font-size: 15px; font-weight: 600; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__wd { font-size: 10px; color: var(--faint); text-align: center; text-transform: uppercase; padding-bottom: 4px; }
.cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid transparent; background: color-mix(in srgb, var(--mint) calc(var(--fill, 0) * 45%), transparent); }
.cal__day--today { border-color: var(--mint); }
.cal__day--on { background: var(--mint); color: var(--mint-ink); }
.cal__date { font-size: 10px; color: var(--faint); }
.cal__day--on .cal__date { color: var(--mint-ink); }
.cal__hours { font-size: 13px; font-weight: 600; }
.cal__day--empty .cal__hours { color: var(--faint); font-weight: 400; }
.cal__day--on.cal__day--empty .cal__hours { color: var(--mint-ink); }
.cal__foot { margin-top: 8px; font-size: 12px; color: var(--faint); text-align: center; }

/* The day in money and words: three numbers, then the standup as it goes to
   Pachca — the project, a heading per outcome, the items under it with the
   commit type as the link. */
.standup__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.standup__stats .stat__value { font-size: 24px; }
.standup__text { margin-top: 12px; font-size: 14px; line-height: 1.45; }
.standup__date { font-size: 12px; color: var(--faint); }
.standup__project { font-weight: 700; margin-top: 10px; }
/* The project and the button that hands its standup to Pachca, one row. */
.standup__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.standup__head .standup__project { margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standup__line { overflow-wrap: anywhere; }
.standup__line--head { font-weight: 600; margin-top: 6px; }
.standup__line--head strong { font-weight: inherit; }
.standup__line--item { color: var(--dim); padding-left: 12px; }
.standup__line code { font-family: var(--mono); font-size: 0.92em; }
.standup__line a { text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
.standup__commits summary { cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; gap: 8px; }
.standup__commits summary::-webkit-details-marker { display: none; }
.standup__commits summary .num { font-size: 12px; font-weight: 400; color: var(--faint); }