@font-face { font-family: "Bai Jamjuree"; font-weight: 400; src: url(brand/BaiJamjuree-Regular.ttf); }
@font-face { font-family: "Bai Jamjuree"; font-weight: 600; src: url(brand/BaiJamjuree-SemiBold.ttf); }
@font-face { font-family: "Bai Jamjuree"; font-weight: 700; src: url(brand/BaiJamjuree-Bold.ttf); }

:root {
  --navy: #041B3A; --gold: #E6B222; --paper: #F5F2EA; --white: #FFFFFF;
  --teal: #27766E; --muted: #596776; --line: #D6DDD9; --radius: 12px; --u: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--navy); font: 400 17px/1.5 "Bai Jamjuree", system-ui, sans-serif; }
h1, h2 { font-weight: 700; line-height: 1.2; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

.top { display: flex; align-items: center; gap: calc(var(--u) * 3); flex-wrap: wrap; padding: var(--u) calc(var(--u) * 3);
       background: var(--navy); border-bottom: 4px solid var(--gold); }
.top a, .top .link { color: var(--white); }
.top :focus-visible { outline-color: var(--white); }
.logo { height: 32px; }
.top nav { display: flex; gap: calc(var(--u) * 2); flex: 1; }
.who { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.who form { margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

main { max-width: 960px; margin: 0 auto; padding: calc(var(--u) * 3); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--u) * 2); }
.narrow { max-width: 420px; }
.plain { list-style: none; margin: 0; }
.plain li { padding: var(--u) 0; border-bottom: 1px solid var(--line); }
.muted { color: var(--muted); }
.flash { background: var(--white); border: 1px solid var(--gold);
         border-radius: var(--radius); padding: var(--u) calc(var(--u) * 2); }

label { display: block; margin-bottom: calc(var(--u) * 2); font-weight: 600; }
input { display: block; width: 100%; margin-top: 4px; padding: var(--u) calc(var(--u) * 1.5); font: inherit;
        border: 1px solid var(--muted); border-radius: var(--u); background: var(--white); color: var(--navy); }
form.inline { display: flex; gap: var(--u); align-items: end; flex-wrap: wrap; margin-top: var(--u); }
form.inline label { margin: 0; }
button { font: inherit; font-weight: 600; padding: var(--u) calc(var(--u) * 2); border: 0; border-radius: var(--u);
         background: var(--navy); color: var(--white); cursor: pointer; }
button.link { background: none; padding: 0; font-weight: 400; }

.amount-pos { color: var(--teal); font-weight: 600; }
.amount-neg { color: var(--navy); font-weight: 600; }
.flag { background: rgba(230,178,34,.18); color: var(--navy); padding: calc(var(--u) / 2) var(--u); border-radius: var(--u); margin-top: var(--u); }
.flag::before { content: "\26A0\00a0"; }

.bar { display: flex; align-items: center; gap: calc(var(--u) * 2); flex-wrap: wrap; }
.bar p { margin: 0; }
.bar form { margin: 0; }
.filters { display: flex; gap: calc(var(--u) * 2); margin: var(--u) 0 calc(var(--u) * 2); }
.filters .on { font-weight: 700; text-decoration: none; }
table.days { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); margin-bottom: calc(var(--u) * 3); }
table.days caption { text-align: left; font-weight: 700; padding: var(--u) 0; }
table.days th, table.days td { padding: var(--u); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.days thead th { color: var(--muted); font-weight: 600; }
table.days tbody th { font-weight: 400; }
.num { text-align: right !important; white-space: nowrap; }
input.tick { display: inline-block; width: 24px; height: 24px; margin: 0; }
form.flag { display: block; }
button.small { padding: 2px var(--u); font-size: 14px; }
label.check { display: flex; gap: var(--u); align-items: center; font-weight: 400; }
label.check input { width: 24px; margin: 0; }
details summary { cursor: pointer; font-weight: 600; }