/* ============================================================================
   LOGBOG — Lada Niva restoration tracker (Kort og godt)
   ----------------------------------------------------------------------------
   A single-user, single-vehicle mobile web app. The design is a high-fidelity
   handoff with its OWN committed palette (warm paper + dark-olive ink), so this
   app does NOT follow the site-wide light/dark appearance — the colours below
   are final in both. Fonts: Archivo (display/UI) + JetBrains Mono (numerics).
   ============================================================================ */

:root {
  --ink: #20240F;          /* header / dark card bg, primary text, active states */
  --paper: #F4F2EC;        /* app surface, text on ink */
  --field: #E7E4DA;        /* page bg behind the app column */
  --card: #FFFFFF;         /* list / card surfaces */
  --line: #DEDACC;         /* card borders, rules, nav top border */
  --line-dark: #3A4020;    /* rules / tracks on ink */
  --hover: #EDEAE0;        /* nav hover, doc type chip */
  --muted: #7A7F63;        /* secondary text on paper */
  --muted-ink: #9AA37E;    /* secondary text on ink */
  --legend: #C9CDB6;       /* legend text on ink */
  --disabled: #9A9784;     /* completed task text */
  --nav-idle: #A5A292;     /* inactive nav label */
  --box-idle: #C6C2B2;     /* unchecked checkbox border */
  --accent: #D2612B;       /* progress fill, % figure, timeline dot, nav indicator */
  --accent-dark: #B5561F;  /* links, Ordered badge text */
  --link-hover: #8E3F13;   /* link hover */
  --green: #A8C06A;        /* remaining amount, Body budget segment */
  --green-dark: #4A6122;   /* In stock badge text */
  --green-pale: #E8F0D8;   /* In stock badge bg */
  --orange-pale: #FAE6D8;  /* Ordered badge bg */
  --grey-pale: #E4E1D6;    /* Fitted badge bg */

  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--field);
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: var(--link-hover); }
input, button, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 0; height: 0; }

/* ── App column ──────────────────────────────────────────────────────────── */
.lb-stage { min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; }

.lb-app {
  width: 100%;
  max-width: 430px;
  background: var(--paper);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(23, 25, 15, .12);
}

/* ── Standalone-only "back to apps" button ───────────────────────────────────
   An icon-only disc over the dark header. Hidden when embedded in the landing
   Frame (which supplies its own ✕); the header row is inset to clear it. */
.lb-back {
  position: fixed;
  top: 15px;
  left: 14px;
  z-index: 40;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(244, 242, 236, .12);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(244, 242, 236, .18);
  transition: background .12s ease;
}
.lb-back:hover { color: var(--paper); background: rgba(244, 242, 236, .22); }
.lb-back svg { display: block; }
html.embedded .embedded-hide { display: none !important; }
/* Make room for the back disc in standalone so it never covers the eyebrow. */
html:not(.embedded) .lb-header-row { padding-left: 44px; }

/* ── Header (sticky) ─────────────────────────────────────────────────────── */
.lb-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 18px 20px 16px;
}
.lb-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lb-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.lb-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; }
.lb-header-right { text-align: right; flex-shrink: 0; }
.lb-overall { font-family: var(--font-mono); font-size: 28px; font-weight: 700; line-height: 1; color: var(--accent); }
.lb-overall-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-ink);
  margin-top: 4px;
}
.lb-progress { height: 4px; background: var(--line-dark); border-radius: 2px; margin-top: 14px; overflow: hidden; }
.lb-progress-fill { height: 100%; background: var(--accent); transition: width .18s ease; }

/* ── Scrolling content ───────────────────────────────────────────────────── */
.lb-content {
  flex: 1;
  padding: 20px 20px 110px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.lb-view { display: flex; flex-direction: column; }

/* ── Home: budget card ───────────────────────────────────────────────────── */
.lb-home { gap: 22px; }
.lb-budget { background: var(--ink); border-radius: 16px; padding: 20px; color: var(--paper); }
.lb-budget-top { display: flex; justify-content: space-between; align-items: baseline; }
.lb-budget-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-ink);
}
.lb-budget-pct { font-family: var(--font-mono); font-size: 11px; color: var(--muted-ink); }
.lb-budget-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.lb-spent { font-family: var(--font-mono); font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.lb-planned { font-family: var(--font-mono); font-size: 14px; color: var(--muted-ink); }
.lb-bar { height: 10px; background: var(--line-dark); border-radius: 5px; margin-top: 16px; display: flex; overflow: hidden; }
.lb-bar-seg { height: 100%; }
.lb-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 16px; }
.lb-legend-item { display: flex; align-items: center; gap: 7px; }
.lb-swatch { width: 8px; height: 8px; border-radius: 2px; }
.lb-legend-name { font-size: 12px; color: var(--legend); }
.lb-legend-amt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.lb-budget-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; align-items: center;
}
.lb-remaining-label { font-size: 13px; color: var(--muted-ink); }
.lb-remaining-amt { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--green); }

/* ── Section label (This weekend) ────────────────────────────────────────── */
.lb-section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.lb-rows { display: flex; flex-direction: column; gap: 8px; }

/* ── Task row (shared) ───────────────────────────────────────────────────── */
.lb-task {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: left; width: 100%; font: inherit; color: inherit;
}
.lb-task.lb-task--home { padding: 14px 16px; }
.lb-task:hover { border-color: var(--ink); }
.lb-task:active { background: var(--hover); }
.lb-check {
  width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--box-idle);
  background: transparent; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.lb-task.is-done .lb-check { border-color: var(--ink); background: var(--ink); }
.lb-task-body { flex: 1; min-width: 0; }
.lb-task-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.lb-task.is-done .lb-task-name { color: var(--disabled); text-decoration: line-through; }
.lb-task-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.lb-task-est { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* ── Home: quick stats grid ──────────────────────────────────────────────── */
.lb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lb-stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; transition: border-color .12s ease;
  text-align: left; width: 100%; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.lb-stat:hover { border-color: var(--ink); }
.lb-stat:active { background: var(--hover); }
.lb-stat-value { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.lb-stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Tasks view ──────────────────────────────────────────────────────────── */
.lb-tasks { gap: 20px; }
.lb-view-head { display: flex; justify-content: space-between; align-items: baseline; }
.lb-view-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.lb-view-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.lb-sys-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lb-sys-name {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); font-weight: 700;
}
.lb-sys-rule { flex: 1; height: 1px; background: var(--line); }
.lb-sys-ratio { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.lb-sys-tasks { display: flex; flex-direction: column; gap: 6px; }

/* ── Parts view ──────────────────────────────────────────────────────────── */
.lb-parts { gap: 18px; }
.lb-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-pill {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-family: var(--font-ui); transition: border-color .12s ease, background .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb-pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lb-part { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.lb-part-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lb-part-left { flex: 1; min-width: 0; }
.lb-part-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.lb-part-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.lb-part-right { text-align: right; flex-shrink: 0; }
.lb-part-price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.lb-badge {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
}

/* ── Log view ────────────────────────────────────────────────────────────── */
.lb-log { gap: 18px; }
.lb-timeline { display: flex; flex-direction: column; gap: 0; }
.lb-session { display: flex; gap: 14px; }
.lb-session-date { width: 52px; flex-shrink: 0; text-align: right; padding-top: 14px; }
.lb-session-day { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); }
.lb-session-month { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.lb-session-body {
  flex: 1; min-width: 0; border-left: 2px solid var(--line);
  padding: 14px 0 14px 16px; position: relative;
}
.lb-session-dot { position: absolute; left: -5px; top: 19px; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
.lb-session-what { font-size: 15px; font-weight: 500; color: var(--ink); }
.lb-session-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── More view ───────────────────────────────────────────────────────────── */
.lb-more { gap: 24px; }
.lb-more-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 12px; }
.lb-doc {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: border-color .12s ease; -webkit-tap-highlight-color: transparent;
}
.lb-doc:hover { border-color: var(--ink); }
.lb-doc-chip {
  width: 34px; height: 34px; border-radius: 8px; background: var(--hover);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--muted); flex-shrink: 0;
}
.lb-doc-body { flex: 1; min-width: 0; }
.lb-doc-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.lb-doc-date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.lb-wish {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.lb-wish-left { flex: 1; min-width: 0; }
.lb-wish-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.lb-wish-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.lb-wish-price { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--muted); flex-shrink: 0; }

/* ── Bottom nav (sticky) ─────────────────────────────────────────────────── */
.lb-nav {
  position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.lb-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 2px; border-radius: 10px; cursor: pointer; min-height: 52px;
  justify-content: center; border: none; background: transparent; font: inherit;
  transition: background .12s ease; -webkit-tap-highlight-color: transparent;
}
.lb-nav-item:hover { background: var(--hover); }
.lb-nav-bar { width: 22px; height: 2px; border-radius: 1px; background: transparent; }
.lb-nav-item.is-active .lb-nav-bar { background: var(--accent); }
.lb-nav-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--nav-idle);
}
.lb-nav-item.is-active .lb-nav-label { color: var(--ink); }