/* The primary color is #5aa9ff with bold black text on it, in both modes. It's too light to be
   text on a light background, so links and focus rings use black there and it shows as fills
   and underlines instead. Personal expenses have their own color, so they never look like
   business ones. */
:root {
  --primary: #5aa9ff;
  --on-primary: #000000;
  --bg: #f4f5f8;
  --card: #ffffff;
  --fg: #13151a;
  --muted: #5d6270;
  --line: #d8dbe2;
  --raised: #e8eaf0;
  --focus: #000000;
  --danger: #b3261e;
  --warning: #8a5300;
  --warning-bg: #fff4e0;
  --ok: #17663f;
  --ok-bg: #dcf7e9;
  --personal: #5b3fae;
  --personal-bg: #efeafc;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111318;
    --card: #1b1e24;
    --fg: #eef0f4;
    --muted: #a0a6b2;
    --line: #323640;
    --raised: #272b33;
    --focus: #5aa9ff;
    --danger: #ff8a7a;
    --warning: #ffc266;
    --warning-bg: #3a2c12;
    --ok: #7be6b3;
    --ok-bg: #173628;
    --personal: #c9b8ff;
    --personal-bg: #2a2340;
  }
}

/* Parts of a form shown only sometimes, such as the business fields, are hidden with the hidden
   attribute, which a display rule would otherwise override. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}

a {
  color: inherit;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.75rem 0 0.75rem; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* --- Header ------------------------------------------------------------------------------ */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.brand img { width: 2rem; height: 2rem; }

/* On a phone the links take their own row below the brand and the name. */
header nav {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  width: 100%;
}

header nav a { font-weight: 600; text-decoration: none; padding: 0.25rem 0; }
header nav a:hover { text-decoration: underline var(--primary) 2px; }

@media (min-width: 40rem) {
  header nav { order: 0; width: auto; flex: 1; }
}

/* The account menu: the name with a chevron, opening a small panel below it. */
.menu { position: relative; margin-left: auto; }

.menu summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}

.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: " ▾"; color: var(--muted); }
.menu summary:hover, .menu[open] summary { background: var(--raised); }

.menu > div {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 2;
  display: grid;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
}

.menu > div > * {
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 4px;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
}

.menu > div > :hover { background: var(--raised); }

/* --- Controls ---------------------------------------------------------------------------- */

button, a.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}

button:hover, a.button:hover { background: var(--raised); }
button:disabled { opacity: 0.6; cursor: default; }

button.primary, a.button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

button.primary:hover, a.button.primary:hover { filter: brightness(0.93); }

a.button.big {
  display: block;
  text-align: center;
  padding: 0.9rem;
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}

button.danger { color: var(--danger); }

input, select, textarea {
  font: inherit;
  color: inherit;
  background: var(--card);
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}

textarea { resize: vertical; }

.fields { display: grid; gap: 0.9rem; }

.field { display: grid; gap: 0.3rem; }
.field > span:first-child { font-weight: 600; }

/* Values already used, under a text field, to tap instead of typing. */
.suggestions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.suggestions:not(:empty) { margin-top: 0.4rem; }
.suggestions button { padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--raised); font-weight: 400; }

/* One of a few large buttons, such as Business or Personal: radio buttons, drawn as buttons. The
   radio itself stays in the page, invisible, so it can still be focused and read out. */
.choice { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.5rem; }

.choice label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; margin: 0; }
.choice label:has(input:checked) { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; }
.choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The deductible amount, worked out as the form is filled in. */
.deductible { margin: 0; padding: 0.6rem 0.75rem; border-radius: 6px; background: var(--raised); }

/* A field set apart from the files above it, such as an expense's note. */
.gap { margin-top: 1.75rem; }

/* A checkbox with its label beside it, such as Refund. */
.check { display: flex; align-items: center; gap: 0.5rem; }
.check input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.status { margin: 0; font-size: 0.875rem; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

h1 + .row, .row > h1 { margin-top: 0; }

/* --- Badges ----------------------------------------------------------------------------- */

.badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--raised);
  color: var(--muted);
  white-space: nowrap;
}

.badge.documented { background: var(--ok-bg); color: var(--ok); }
/* What a record needs can be a long list, so it wraps rather than run off a phone's screen. */
.badge.missing { background: var(--warning-bg); color: var(--warning); white-space: normal; }
.badge.personal { background: var(--personal-bg); color: var(--personal); }

.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
h1 + div > .badges { margin: -0.5rem 0 1rem; }

/* --- Lists ------------------------------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }

.list > li {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.list > li > a { display: grid; gap: 0.2rem; text-decoration: none; }

/* A record that still needs something; a personal expense, marked down its side. */
.list > li.needs { background: var(--warning-bg); padding-inline: 0.75rem; }
.list > li.needs .badge.missing { background: var(--card); }
.list > li.personal { border-left: 4px solid var(--personal); padding-left: 0.75rem; }
.list > li > a:hover strong { text-decoration: underline var(--primary) 3px; text-underline-offset: 4px; }

/* --- Files: an expense's receipt or statement, or a transfer's or document's ------------ */

.slot {
  padding: 0.75rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.slot .row { justify-content: flex-start; }
.slot select { width: auto; flex: 1; min-width: 12rem; }
.slot .status:not(:empty) { margin-top: 0.5rem; }

.files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.slot .files:not(:empty) { margin-bottom: 0.75rem; }
.list .files { margin: 0.25rem 0; }
.files button { padding: 0.25rem 0.7rem; font-size: 0.9rem; }

.files figure { position: relative; display: flex; align-items: center; gap: 0.25rem; margin: 0; }

/* A photo uploaded here, shown small; tapped, at full width to check it's readable. */
.files img {
  display: block;
  width: 6rem;
  height: 8rem;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: zoom-in;
}

.files figure:has(img.big) { flex-basis: 100%; }
.files img.big { width: 100%; height: auto; object-fit: contain; cursor: zoom-out; }

.files figure:has(img) .remove { position: absolute; top: 0.25rem; right: 0.25rem; }

.files .remove {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  background: var(--card);
  line-height: 1;
}