diff --git a/src/quartermaster/static/app.css b/src/quartermaster/static/app.css
index c8cdf8d..2574f91 100644
--- a/src/quartermaster/static/app.css
+++ b/src/quartermaster/static/app.css
@@ -1,487 +1,798 @@
:root {
- --bg: #f7f6f2;
- --ink: #1f1f1f;
- --muted: #6b6b6b;
- --accent: #2f6b4f;
- --danger: #a03030;
- --rule: #d8d6cf;
- --row: #fafaf7;
+ --paper: #f5efe0;
+ --paper-deep: #efe7d4;
+ --paper-soft: #faf5e8;
+ --paper-stripe: #f1ead9;
+ --ink: #1a1814;
+ --ink-soft: #3a362e;
+ --muted: #7e7668;
+ --rule: #c8bfa8;
+ --rule-soft: #dcd4bf;
+
+ --accent: #732629;
+ --accent-dark: #4d1214;
+ --accent-soft: #a13a40;
+ --ochre: #9c6b1a;
+ --sage: #2d4a30;
+ --sage-soft: #6a8870;
+ --indigo: #353a5e;
+
+ --sans: "Barlow Condensed", "Oswald", sans-serif;
+ --sans-wide: "Barlow", "Helvetica Neue", sans-serif;
}
-* { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: border-box; }
-body {
+html, body {
margin: 0;
- font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+ padding: 0;
color: var(--ink);
- background: var(--bg);
- line-height: 1.4;
+ background: var(--paper);
+ font-family: var(--sans);
+ font-weight: 400;
+ font-feature-settings: "lnum" 1;
+ line-height: 1.35;
+ background-image:
+ radial-gradient(circle at 18% 10%, rgba(200, 191, 168, 0.16) 0, transparent 42%),
+ radial-gradient(circle at 84% 82%, rgba(200, 191, 168, 0.12) 0, transparent 50%);
}
-header {
- padding: 1.25rem 2rem 0.25rem;
- border-bottom: 1px solid var(--rule);
- background: #fff;
-}
+main { min-height: 100vh; }
-header h1 {
- margin: 0;
- font-size: 1.4rem;
-}
-
-.subtitle {
- margin: 0;
- color: var(--muted);
- font-size: 0.9rem;
-}
-
-main {
- padding: 1rem 0 3rem;
-}
-
-.budget {
- max-width: 720px;
+.page {
+ max-width: 880px;
margin: 0 auto;
- padding: 0 1rem;
+ padding: 1.25rem 1.25rem 3rem;
+ position: relative;
}
+/* =============== NAV LINES =============== */
+
+.month-nav,
+.month-line {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr auto auto;
+ align-items: baseline;
+ gap: 1rem;
+ padding: 0.4rem 0 0.55rem;
+ border-bottom: 1px solid var(--ink);
+}
+.budget-nav {
+ display: grid;
+ grid-template-columns: 1fr auto auto;
+ align-items: baseline;
+ gap: 1rem;
+ padding: 0.4rem 0 0.55rem;
+ border-bottom: 1px solid var(--ink);
+}
+
+.nav-link,
+.nav-month {
+ font-family: var(--sans);
+ font-weight: 400;
+ font-style: italic;
+ font-size: 1rem;
+ color: var(--muted);
+ text-decoration: none;
+ transition: color 0.12s;
+ letter-spacing: 0.02em;
+}
+.nav-link:hover,
+.nav-month:hover { color: var(--ink); }
+.nav-month.prev { text-align: right; }
+.nav-month .chev { font-style: normal; margin: 0 0.25em; }
+
+.month-label,
+.month-title {
+ font-family: var(--sans);
+ font-weight: 600;
+ font-size: 1.45rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ margin: 0;
+ white-space: nowrap;
+}
+.month-title .year {
+ font-weight: 300;
+ font-style: italic;
+ margin-left: 0.35em;
+ letter-spacing: 0.06em;
+ color: var(--muted);
+}
+
+.state-badge {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 0.85rem;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.state-badge::before { content: "· "; opacity: 0.5; letter-spacing: 0; }
+.state-badge::after { content: " ·"; opacity: 0.5; letter-spacing: 0; }
+.state-badge.state-planning { color: var(--indigo); }
+.state-badge.state-active { color: var(--sage); }
+.state-badge.state-closed { color: var(--muted); text-transform: none; letter-spacing: 0.04em; font-style: italic; }
+.state-badge.state-closed::before,
+.state-badge.state-closed::after { content: ""; }
+
+.lifecycle-form { margin: 0; }
+
+.lifecycle-form button,
+.btn-close {
+ font-family: var(--sans);
+ font-weight: 600;
+ font-size: 0.85rem;
+ color: var(--ink);
+ background: var(--paper-soft);
+ border: 1px solid var(--ink);
+ padding: 0.25rem 0.9rem 0.3rem;
+ cursor: pointer;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
+}
+.lifecycle-form button:hover,
+.btn-close:hover { background: var(--ink); color: var(--paper); }
+.lifecycle-form button.secondary { background: transparent; }
+.lifecycle-form button[disabled] {
+ cursor: not-allowed;
+ opacity: 0.45;
+ color: var(--muted);
+ border-color: var(--muted);
+}
+.lifecycle-form button[disabled]:hover {
+ background: var(--paper-soft);
+ color: var(--muted);
+}
+
+.back-link-row {
+ display: flex;
+ justify-content: flex-end;
+ padding: 0.3rem 0 0;
+}
+.back-link {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 0.7rem;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: var(--muted);
+ text-decoration: none;
+}
+.back-link:hover { color: var(--ink); }
+
+.spacer { flex: 1; }
+
+.month-picker {
+ font-family: var(--sans);
+ font-weight: 400;
+ font-size: 0.88rem;
+ padding: 0.2rem 0.45rem;
+ border: 1px solid var(--rule);
+ background: var(--paper-soft);
+ color: var(--ink);
+ letter-spacing: 0.04em;
+}
+
+/* =============== ZERO HERO =============== */
+
+.zero-widget {
+ display: grid;
+ grid-template-columns: auto 1fr auto 1fr;
+ align-items: center;
+ gap: 1.8rem;
+ padding: 1rem 0.25rem 1rem;
+ border-bottom: 3px double var(--ink);
+}
+.zero-widget.single {
+ grid-template-columns: auto 1fr;
+}
+
+.zero-brand { justify-self: start; }
+.zero-brand img {
+ height: 132px;
+ width: auto;
+ display: block;
+ mix-blend-mode: multiply;
+}
+
+.zero-side {
+ display: flex;
+ flex-direction: column;
+ gap: 0.05rem;
+}
+.zero-side.left { text-align: right; padding-right: 0.3rem; }
+.zero-side.right { text-align: left; padding-left: 0.3rem; }
+
+.zero-sublabel {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 0.7rem;
+ letter-spacing: 0.3em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.zero-subvalue {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 1.45rem;
+ color: var(--ink);
+ font-feature-settings: "lnum" 1, "tnum" 1;
+}
+.zero-subvalue .cent { font-size: 0.7em; vertical-align: 0.4em; color: var(--muted); margin-left: 0.08em; }
+
+.zero-center { text-align: center; padding: 0 0.4rem; }
+.zero-label {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 0.72rem;
+ letter-spacing: 0.36em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin: 0 0 0.15rem;
+}
+.zero-value {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: clamp(2.8rem, 7vw, 4.4rem);
+ line-height: 0.95;
+ letter-spacing: -0.015em;
+ margin: 0;
+ color: var(--sage);
+ font-feature-settings: "lnum" 1, "tnum" 1;
+}
+.zero-value .dollar { font-size: 0.5em; vertical-align: 0.4em; color: var(--muted); margin-right: 0.04em; font-weight: 400; }
+.zero-value .cent { font-size: 0.38em; vertical-align: 1em; color: var(--muted); margin-left: 0.05em; font-weight: 400; }
+.zero-value.tone-zero { color: var(--sage); }
+.zero-value.tone-positive { color: var(--ochre); }
+.zero-value.tone-negative { color: var(--accent); }
+
+.zero-caption {
+ font-family: var(--sans);
+ font-style: italic;
+ font-weight: 400;
+ font-size: 0.88rem;
+ color: var(--muted);
+ margin: 0.2rem 0 0;
+ letter-spacing: 0.02em;
+}
+
+/* =============== GROUPS =============== */
+
+details.group {
+ border-bottom: 1px solid var(--ink);
+ margin: 0;
+}
+details.group[open] { padding-bottom: 0.6rem; }
+
+details.group > summary {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ gap: 0.75rem;
+ align-items: baseline;
+ padding: 0.6rem 0 0.4rem;
+ cursor: pointer;
+ list-style: none;
+ user-select: none;
+ border-bottom: 1px solid var(--rule);
+}
+details.group > summary::-webkit-details-marker { display: none; }
+details.group[open] > summary { border-bottom: none; }
+
+details.group .chevron {
+ display: inline-block;
+ width: 0.7rem;
+ height: 0.7rem;
+ position: relative;
+ transform: rotate(-90deg);
+ transition: transform 0.15s ease;
+}
+details.group .chevron::before {
+ content: "";
+ position: absolute; top: 50%; left: 0;
+ width: 0.7rem; height: 1px;
+ background: var(--ink); transform: translateY(-0.5px);
+}
+details.group .chevron::after {
+ content: "";
+ position: absolute; top: 50%; left: 50%;
+ width: 1px; height: 0.7rem;
+ background: var(--ink); transform: translate(-50%, -50%);
+ transition: opacity 0.15s ease;
+}
+details.group[open] > summary .chevron { transform: rotate(0); }
+details.group[open] > summary .chevron::after { opacity: 0; }
+
+.group-name {
+ font-family: var(--sans);
+ font-weight: 700;
+ font-size: 1.25rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+}
+
+.group-total {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 1rem;
+ font-feature-settings: "lnum" 1, "tnum" 1;
+}
+.group-total .divider { color: var(--rule); margin: 0 0.15em; font-weight: 300; }
+.group-total .planned { color: var(--muted); font-size: 0.92em; font-weight: 400; }
+.group-total .applied { color: var(--ink); }
+
+/* =============== SECTIONS =============== */
+
.section {
- margin-top: 1.5rem;
+ padding: 0.4rem 0 0.4rem;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
}
+.section + .section { border-top: 1px dashed var(--rule); }
.section-header {
- display: flex;
- justify-content: space-between;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 0.5rem;
align-items: baseline;
- padding: 0.25rem 0.5rem;
- border-bottom: 2px solid var(--ink);
+ padding: 0.15rem 0.25rem 0.2rem;
}
.section-header h2 {
+ font-family: var(--sans);
+ font-size: 0.72rem;
+ font-weight: 700;
+ letter-spacing: 0.26em;
+ text-transform: uppercase;
+ color: var(--ink-soft);
margin: 0;
- font-size: 1.05rem;
- font-weight: 600;
- letter-spacing: 0.01em;
}
.total {
- font-variant-numeric: tabular-nums;
- font-weight: 600;
- color: var(--accent);
-}
-
-.total.empty {
- color: var(--muted);
+ font-family: var(--sans);
font-weight: 500;
+ font-size: 0.9rem;
+ color: var(--ink-soft);
+ font-feature-settings: "lnum" 1, "tnum" 1;
}
+.total .divider { color: var(--rule); margin: 0 0.2em; font-weight: 300; }
+.total .planned { color: var(--muted); font-weight: 400; }
+.total .applied { color: var(--ink-soft); }
+.total.empty { color: var(--muted); }
+
+/* =============== ENTRY TABLE =============== */
table.entries {
width: 100%;
border-collapse: collapse;
- font-variant-numeric: tabular-nums;
+ font-family: var(--sans);
+}
+table.entries thead { display: none; }
+
+table.entries tbody tr.entry {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem 1.2rem;
+ gap: 0.6rem;
+ align-items: baseline;
+ padding: 0.26rem 0.25rem 0.28rem;
+ position: relative;
+ border-bottom: 1px dotted var(--rule);
+}
+table.entries tbody tr.entry:hover { background: var(--paper-stripe); }
+table.entries tbody tr.entry td {
+ padding: 0;
+ border: none;
+ vertical-align: baseline;
+ min-width: 0;
}
-table.entries td {
- padding: 0.35rem 0.5rem;
- border-bottom: 1px solid var(--rule);
- vertical-align: middle;
+table.entries tbody tr.entry::after {
+ content: "";
+ position: absolute;
+ left: 0; right: 0; bottom: -1px;
+ height: 2px;
+ background: var(--sage-soft);
+ width: min(100%, calc(var(--ratio, 1) * 100%));
+ transition: width 0.25s ease;
+ opacity: 0.7;
}
-
-tr.entry td.entry-name { width: auto; }
-tr.entry td.entry-amount {
- width: 9rem;
- text-align: right;
- color: var(--muted);
+table.entries tbody tr.entry.state-edited::after,
+table.entries tbody tr.entry[data-deviation="over"]::after {
+ background: var(--accent);
+ opacity: 0.85;
}
-tr.entry td.entry-actions {
- width: 2.25rem;
- text-align: right;
+table.entries tbody tr.entry.state-new_in_month::after {
+ background: var(--indigo);
+ opacity: 0.55;
}
tr.empty td {
+ padding: 0.4rem 0.5rem !important;
color: var(--muted);
font-style: italic;
+ font-size: 0.9rem;
}
tr.add-row td {
- padding: 0.35rem 0.5rem;
+ padding: 0.4rem 0.25rem 0.2rem !important;
+ border-bottom: none !important;
+ grid-column: 1 / -1;
+ display: block;
+}
+
+.entry-name {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 1.02rem;
+ color: var(--ink);
+ letter-spacing: 0.01em;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.entry-name input {
+ font: inherit;
+ color: inherit;
background: transparent;
- border-bottom: none;
-}
-
-.muted { color: var(--muted); font-style: italic; }
-
-tr.entry-notes-row td {
- padding: 0 0.5rem 0.35rem;
- border-bottom: 1px solid var(--rule);
-}
-
-.notes-input {
+ border: none;
+ border-bottom: 1px solid transparent;
+ padding: 0;
width: 100%;
- padding: 0.2rem 0.4rem;
+ outline: none;
+ transition: border-color 0.12s;
+}
+.entry-name input:hover { border-bottom-color: var(--rule); }
+.entry-name input:focus { border-bottom-color: var(--ink); }
+
+.entry-amount {
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: 1rem;
+ color: var(--ink);
+ font-feature-settings: "lnum" 1, "tnum" 1;
+ text-align: right;
+ min-width: 0;
+}
+.entry-amount input {
+ font: inherit;
+ font-variant-numeric: tabular-nums;
+ color: inherit;
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid transparent;
+ padding: 0;
+ width: 100%;
+ outline: none;
+ text-align: right;
+ transition: border-color 0.12s;
+}
+.entry-amount input:hover { border-bottom-color: var(--rule); }
+.entry-amount input:focus { border-bottom-color: var(--ink); }
+
+/* On the budget page the planned-amount cell is the only numeric cell;
+ still render it like a ledger number. */
+tr.entry td.entry-amount:first-of-type { color: var(--ink); }
+
+.entry-actions button.delete {
+ font-family: var(--sans);
+ font-size: 1.2rem;
+ line-height: 1;
+ color: var(--rule);
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ opacity: 0;
+ transition: color 0.12s ease, opacity 0.12s ease;
+ align-self: center;
+ font-weight: 400;
+}
+tr.entry:hover .entry-actions button.delete { opacity: 1; }
+.entry-actions button.delete:hover { color: var(--accent); }
+
+/* Notes row — hidden when empty, shown on hover or when value is set */
+tr.entry-notes-row {
+ display: block;
+ grid-column: 1 / -1;
+ font-family: var(--sans);
+ font-style: italic;
+ font-weight: 400;
font-size: 0.85rem;
color: var(--muted);
+ line-height: 1.3;
+ padding: 0;
+ margin-top: -0.25rem;
+}
+tr.entry-notes-row td {
+ padding: 0 0.25rem 0.25rem !important;
+ border-bottom: 1px dotted var(--rule) !important;
+}
+tr.entry-notes-row input.notes-input {
+ font: inherit;
+ font-style: italic;
+ color: inherit;
background: transparent;
border: none;
- border-bottom: 1px dashed transparent;
-}
-
-.notes-input:hover,
-.notes-input:focus {
- border-bottom-color: var(--rule);
+ padding: 0;
+ width: 100%;
outline: none;
}
-
-.notes-input:not(:placeholder-shown) {
- color: var(--ink);
+tr.entry-notes-row input.notes-input::placeholder {
+ color: var(--rule);
font-style: italic;
}
-
-.add-form .add-notes {
- grid-column: 1 / -1;
- font-size: 0.85rem;
+tr.entry-notes-row:has(input:placeholder-shown) { display: none; }
+tr.entry:hover + tr.entry-notes-row:has(input:placeholder-shown) {
+ display: block;
+ opacity: 0.5;
}
-button.delete {
- background: transparent;
- border: none;
- color: var(--danger);
+.tag {
+ font-family: var(--sans);
+ font-size: 0.58rem;
+ font-weight: 600;
+ letter-spacing: 0.26em;
+ text-transform: uppercase;
+ padding: 0.03rem 0.4rem 0.05rem;
+ margin-left: 0.45rem;
+ vertical-align: 0.15em;
+ border: 1px solid currentColor;
+ color: var(--ochre);
+ display: inline-block;
+}
+.tag-edited { color: var(--ochre); }
+.tag-new { color: var(--indigo); }
+
+/* =============== PRIMARY DEBT TARGET =============== */
+
+.section.target-section {
+ padding: 0.4rem 0 0.4rem 0.75rem;
+ border-left: 3px solid var(--accent);
+ background: linear-gradient(90deg, rgba(115, 38, 41, 0.05), transparent 40%);
+ position: relative;
+}
+.section.target-section::before {
+ content: "↳";
+ position: absolute;
+ left: -1.1rem;
+ top: 0.45rem;
+ color: var(--accent);
+ font-family: var(--sans);
font-size: 1rem;
- cursor: pointer;
- padding: 0 0.25rem;
- line-height: 1;
+ font-weight: 400;
+}
+.section.target-section .section-header h2 {
+ color: var(--accent);
+}
+.section.target-section .total .applied,
+.section.target-section .total .planned {
+ color: var(--ink);
}
-.add-form {
- display: grid;
- grid-template-columns: 1fr 9rem auto;
- gap: 0.5rem;
+.target-section .entries td.entry-name {
+ font-family: var(--sans);
+ font-weight: 600;
+ font-size: 1.02rem;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+.target-section .entries td.entry-name .muted {
+ font-weight: 400;
+ text-transform: none;
+ letter-spacing: 0.02em;
+ color: var(--muted);
+ font-style: italic;
}
.target-form {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem;
+ align-items: center;
}
-
-input[type=text],
-input[type=number],
-select {
- padding: 0.35rem 0.5rem;
+.target-form label {
+ grid-column: 1 / -1;
+ font-size: 0.66rem;
+ color: var(--muted);
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ font-weight: 500;
+}
+.target-form select {
+ font-family: var(--sans);
+ font-size: 0.9rem;
+ padding: 0.2rem 0.4rem;
border: 1px solid var(--rule);
- border-radius: 3px;
- font: inherit;
- background: #fff;
+ background: var(--paper-soft);
+ color: var(--ink);
}
-
-button[type=submit] {
- padding: 0.35rem 0.9rem;
- background: var(--accent);
- color: #fff;
- border: none;
- border-radius: 3px;
+.target-form button[type="submit"] {
+ font-family: var(--sans);
+ font-weight: 600;
+ font-size: 0.8rem;
+ padding: 0.25rem 0.8rem;
+ border: 1px solid var(--ink);
+ background: var(--paper-soft);
+ color: var(--ink);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
cursor: pointer;
- font: inherit;
+ transition: background 0.12s ease, color 0.12s ease;
}
+.target-form button[type="submit"]:hover { background: var(--ink); color: var(--paper); }
-.target-section .section-header {
- border-bottom-style: dashed;
-}
+/* =============== ADD FORM =============== */
-/* Section groups --------------------------------------------------------- */
-
-details.group {
- margin-top: 1rem;
- border-top: 2px solid var(--ink);
-}
-
-details.group:last-of-type {
- border-bottom: 2px solid var(--ink);
-}
-
-details.group > summary {
- display: flex;
- align-items: baseline;
+.add-form,
+.month-add-form {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 5.5rem auto;
gap: 0.5rem;
- padding: 0.6rem 0.5rem;
+ align-items: center;
+ padding-top: 0.5rem;
+}
+.add-form input[type="text"],
+.add-form input[type="number"],
+.month-add-form input[type="text"],
+.month-add-form input[type="number"] {
+ font-family: var(--sans);
+ font-size: 0.95rem;
+ padding: 0.2rem 0.4rem;
+ border: 1px solid var(--rule);
+ background: var(--paper-soft);
+ color: var(--ink);
+ outline: none;
+ transition: border-color 0.12s;
+}
+.add-form input[type="number"],
+.month-add-form input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
+.add-form input:focus,
+.month-add-form input:focus { border-color: var(--ink); }
+.add-form button[type="submit"],
+.month-add-form button[type="submit"] {
+ font-family: var(--sans);
+ font-weight: 600;
+ font-size: 0.8rem;
+ padding: 0.25rem 0.9rem;
+ border: 1px solid var(--ink);
+ background: var(--paper-soft);
+ color: var(--ink);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
cursor: pointer;
- list-style: none;
- user-select: none;
+ transition: background 0.12s ease, color 0.12s ease;
+}
+.add-form button[type="submit"]:hover,
+.month-add-form button[type="submit"]:hover { background: var(--ink); color: var(--paper); }
+
+.add-form input.add-notes,
+.month-add-form input.add-notes {
+ grid-column: 1 / -1;
+ font-style: italic;
+ font-size: 0.88rem;
+ padding: 0.15rem 0.4rem;
}
-details.group > summary::-webkit-details-marker { display: none; }
+/* Disabled inputs (closed month) */
+input[disabled],
+select[disabled],
+button[disabled] {
+ cursor: not-allowed;
+ color: var(--muted);
+ background: transparent;
+ opacity: 0.8;
+}
-details.group > summary .chevron {
- display: inline-block;
- width: 0.8rem;
- transition: transform 0.12s ease-out;
+/* =============== MONTH CREATE FLOW =============== */
+
+.month-missing {
+ padding: 2rem 1rem;
+ text-align: center;
+ border-top: 1px solid var(--rule);
+ border-bottom: 1px solid var(--rule);
+ margin: 1rem 0;
+}
+.month-missing h2 {
+ font-family: var(--sans);
+ font-weight: 700;
+ font-size: 1.25rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ margin: 0 0 0.75rem;
color: var(--muted);
}
-
-details.group > summary .chevron::before {
- content: "\25B6"; /* black right-pointing triangle */
- font-size: 0.7rem;
+.month-missing-body {
+ max-width: 520px;
+ margin: 0 auto 1.2rem;
+ color: var(--ink-soft);
+ font-style: italic;
+ font-size: 0.95rem;
+ line-height: 1.4;
}
-
-details.group[open] > summary .chevron {
- transform: rotate(90deg);
-}
-
-details.group > summary .group-name {
- flex: 1;
- font-size: 1.05rem;
+.month-create-form button {
+ font-family: var(--sans);
font-weight: 700;
+ font-size: 0.9rem;
+ letter-spacing: 0.18em;
text-transform: uppercase;
+ padding: 0.5rem 1.5rem;
+ border: 2px solid var(--ink);
+ background: var(--paper-soft);
+ color: var(--ink);
+ cursor: pointer;
+ transition: background 0.12s ease, color 0.12s ease;
+}
+.month-create-form button:hover { background: var(--ink); color: var(--paper); }
+
+/* =============== COLOPHON =============== */
+
+.colophon {
+ text-align: center;
+ margin: 2rem 0 0;
+ padding-top: 1rem;
+ border-top: 1px solid var(--rule);
+ font-family: var(--sans);
+ font-style: italic;
+ font-weight: 400;
+ font-size: 0.78rem;
+ color: var(--muted);
letter-spacing: 0.08em;
}
-
-details.group > summary .group-total {
- font-variant-numeric: tabular-nums;
- font-weight: 700;
- color: var(--accent);
- font-size: 1.05rem;
-}
-
-details.group > .section {
- margin-top: 0.5rem;
- margin-bottom: 1rem;
- padding-left: 1rem;
-}
-
-details.group > .section:last-child {
- margin-bottom: 0.75rem;
-}
-
-/* Zero Amount widget ----------------------------------------------------- */
-
-:root {
- --tone-zero: #2f6b4f;
- --tone-positive: #b77b00;
- --tone-negative: #a03030;
-}
-
-.zero-widget {
- margin-top: 1rem;
- padding: 1rem 1.25rem;
- background: #fff;
- border: 1px solid var(--rule);
- border-radius: 6px;
- text-align: center;
-}
-
-.zero-widget .zero-label {
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.15em;
- color: var(--muted);
- margin-bottom: 0.25rem;
-}
-
-.zero-widget .zero-value {
- font-size: 2.4rem;
- font-weight: 700;
- font-variant-numeric: tabular-nums;
- line-height: 1.1;
-}
-
-.zero-widget .zero-sublabel {
- font-size: 0.7rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--muted);
-}
-
-.zero-widget-pair .zero-values {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 1.5rem;
-}
-
-.zero-widget-pair .zero-value {
- font-size: 2rem;
-}
-
-.tone-zero { color: var(--tone-zero); }
-.tone-positive { color: var(--tone-positive); }
-.tone-negative { color: var(--tone-negative); }
-
-/* Monthly view ----------------------------------------------------------- */
-
-.month-nav {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- padding: 0.5rem 0;
- margin-top: 1rem;
- flex-wrap: wrap;
-}
-
-.month-nav .month-label {
- font-size: 1.2rem;
+.colophon .signoff {
+ font-family: var(--sans);
+ font-size: 0.62rem;
+ font-style: normal;
font-weight: 600;
- padding: 0 0.5rem;
-}
-
-.month-nav .nav-link {
- color: var(--accent);
- text-decoration: none;
- padding: 0.25rem 0.5rem;
- border: 1px solid var(--rule);
- border-radius: 3px;
- background: #fff;
- font-size: 0.9rem;
-}
-
-.month-nav .nav-link:hover {
- background: #f0ece0;
-}
-
-.month-nav .state-badge {
- padding: 0.15rem 0.6rem;
- border-radius: 999px;
- font-size: 0.75rem;
- font-weight: 700;
+ letter-spacing: 0.3em;
text-transform: uppercase;
- letter-spacing: 0.1em;
-}
-
-.state-badge.state-planning {
- background: #e9ecf5;
- color: #3a4fa1;
-}
-
-.state-badge.state-active {
- background: #d9f0e4;
- color: #1f6b44;
-}
-
-.state-badge.state-closed {
- background: #e8e6dd;
- color: #4a4a40;
- text-transform: none;
- letter-spacing: 0;
-}
-
-.month-nav .lifecycle-form {
- margin: 0;
-}
-
-.month-nav .lifecycle-form button {
- padding: 0.35rem 0.9rem;
- font-size: 0.9rem;
- border: 1px solid var(--rule);
- border-radius: 3px;
- cursor: pointer;
- font: inherit;
- background: var(--accent);
- color: #fff;
-}
-
-.month-nav .lifecycle-form button.secondary {
- background: #fff;
- color: var(--accent);
-}
-
-.month-nav .lifecycle-form button[disabled] {
- opacity: 0.5;
- cursor: not-allowed;
- background: #c5d4ce;
- color: #fff;
-}
-
-input[disabled],
-select[disabled] {
- background: #f4f3ef;
- color: #6b6b6b;
- cursor: not-allowed;
-}
-
-.month-nav .spacer {
- flex: 1;
-}
-
-.month-nav .month-picker {
- padding: 0.3rem 0.5rem;
- font-size: 0.9rem;
-}
-
-.total .divider {
color: var(--muted);
- margin: 0 0.25rem;
- font-weight: 400;
+ margin-top: 0.2rem;
}
-.total .planned {
- color: var(--muted);
+/* =============== RESPONSIVE =============== */
+
+@media (max-width: 640px) {
+ .zero-widget,
+ .zero-widget.single {
+ grid-template-columns: 1fr;
+ gap: 0.5rem;
+ text-align: center;
+ padding: 0.75rem 0.25rem;
+ }
+ .zero-brand { justify-self: center; }
+ .zero-brand img { height: 100px; }
+ .zero-side.left,
+ .zero-side.right { text-align: center; padding: 0; }
+ .zero-center { padding: 0.25rem 0; }
}
-table.month-entries thead th {
- text-align: left;
- padding: 0.25rem 0.5rem;
- font-size: 0.8rem;
- color: var(--muted);
- font-weight: 500;
- border-bottom: 1px solid var(--rule);
-}
-
-table.month-entries th.col-planned,
-table.month-entries th.col-applied {
- text-align: right;
- width: 8rem;
-}
-
-table.month-entries th.col-actions {
- width: 2.25rem;
-}
-
-table.month-entries td.entry-name input[name="name"] {
- width: 100%;
- min-width: 8rem;
-}
-
-table.month-entries td.entry-amount input {
- width: 100%;
- text-align: right;
-}
-
-tr.entry.state-edited {
- background: #fff7e0;
-}
-
-tr.entry.state-new_in_month {
- background: #e8f2ff;
-}
-
-.tag {
- display: inline-block;
- margin-left: 0.4rem;
- padding: 0.05rem 0.4rem;
- border-radius: 3px;
- font-size: 0.72rem;
- font-weight: 600;
- text-transform: lowercase;
- letter-spacing: 0.02em;
-}
-
-.tag-edited {
- background: #f4d07a;
- color: #5a3f00;
-}
-
-.tag-new {
- background: #9cc5ef;
- color: #123a66;
-}
-
-.month-add-form {
- grid-template-columns: 1fr 9rem auto;
-}
-
-.month-missing-body {
- padding: 0.75rem 0.5rem;
- color: var(--muted);
-}
-
-.month-create-form {
- padding: 0.25rem 0.5rem 0.75rem;
+@media (max-width: 520px) {
+ .page { padding: 1rem 0.85rem 2rem; }
+ .month-nav,
+ .month-line,
+ .budget-nav {
+ grid-template-columns: 1fr 1fr;
+ gap: 0.4rem;
+ }
+ .month-title,
+ .month-label {
+ grid-column: 1 / -1;
+ text-align: center;
+ font-size: 1.1rem;
+ }
+ .state-badge,
+ .lifecycle-form,
+ .back-link,
+ .month-picker,
+ .nav-link {
+ grid-column: 1 / -1;
+ text-align: center;
+ justify-self: center;
+ }
+ table.entries tbody tr.entry {
+ grid-template-columns: minmax(0, 1fr) 4.6rem 4.6rem 1rem;
+ gap: 0.4rem;
+ }
}
diff --git a/src/quartermaster/templates/base.html b/src/quartermaster/templates/base.html
index 807588b..5ae4fae 100644
--- a/src/quartermaster/templates/base.html
+++ b/src/quartermaster/templates/base.html
@@ -4,14 +4,14 @@
Quartermaster
+
+
+
+
-
- Quartermaster
- Household budget
-
{% block content %}{% endblock %}