/* ==========================================================================
Gee What A Planner — the tool behind Gee What a Wedding
Brand: hot pink #e8197a for headings & accents
teal #009faa for labels & borders
white backgrounds only. No gold. No dark surfaces.
========================================================================== */
:root {
--pink: #e8197a;
--pink-deep: #c31465;
--pink-tint: #fdeaf3;
--teal: #009faa;
--teal-deep: #007c85;
--teal-tint: #e7f6f7;
/* ---- the wider palette -------------------------------------------------
Pink on its own got shouty, so categories now carry their own hue. These
are for LABELLING — which category, which section — and are deliberately
kept clear of the traffic-light colours below, which mean something.
Status is always a dot or a pill; a category is always tinted text. Two
different shapes, so even a near-miss on hue can't be misread. */
/* ---- CONFETTI, chosen by Gee on 30 August 2026 -------------------------
Two goes at this. The originals were six unrelated hues at full
saturation and read as a bag of highlighters; I then muted them into one
family and over-corrected so far that Gee called them "grey-brown mud",
which was fair — desaturated against her pink, they looked dead.
Confetti keeps the saturation and picks the six to sit TOGETHER. Every
one carries a meaning, so a colour is never decoration:
magenta you, and your brand
tangerine overdue, needs attention
emerald money — budget, invoices, what is owing
mint celebrancy
sky suppliers and people
grape the couple's own edits
Emerald replaced a gold Gee rejected, and she was right about that too:
it was the only one in the set that was not fully saturated, which is
exactly why it looked dull beside the rest.
The NAMED value is the text colour, because --cat is used as type on
--cat-tint. So these are the readable dark ends of each hue, not the
vivid mid-tone — the vivid version is what the tint is mixed from. */
--c-teal: #00695c; --c-teal-tint: #d9f7f2; /* mint — celebrancy */
--c-sky: #0067a3; --c-sky-tint: #daf0ff; /* sky — suppliers */
--c-indigo: #4a00b0; --c-indigo-tint: #eae0ff; /* grape — couple */
--c-plum: #b3145e; --c-plum-tint: #ffe3ef; /* magenta — you */
/* 🛑 RED, NOT BROWN. Gee, 17 September: "anywhere you've got that ugly
brown, it should be that red." This is the ATTENTION colour — a count you
have not checked, a heading that wants an answer, a job still to do — and
as a solid fill it read as brown, so the one thing on the page asking for
something looked like decoration. Was #b34e00. */
--c-coral: #d4121f; --c-coral-tint: #ffe3e4; /* red — needs you */
/* ⚠️ AND THE PEACH SHE CHOSE IS NOT A STATUS, SO IT KEEPS THE OLD VALUE.
`band-peach` is a run sheet heading colour she picks by hand, `cat-5` is
one of the six category hues, and `door-coral` is a door. Sweeping those
to red would have turned a heading she chose into an alarm and made one
whole supplier category look broken. A palette choice and a warning are
two different jobs that happened to share one token. */
--c-peach: #b34e00; --c-peach-tint: #ffeeda; /* tangerine — chosen */
--c-sage: #00733d; --c-sage-tint: #d6f7e2; /* emerald — money */
/* Added 9 Sept for the section-heading bands. Gee: "maybe give us a few more
pastel color options." These two are the hues the door set has no answer
for — a yellow, and a quiet neutral for the stretches of the day nobody
needs to look at twice (pack down, transfers). Both deep values are dark
enough to hold 700-weight uppercase at .78rem on their own tint, which is
what the six above were chosen against. */
--c-butter: #8a6100; --c-butter-tint: #fff3c4; /* butter — a yellow */
--c-stone: #5f5560; --c-stone-tint: #ece7ea; /* stone — quiet */
/* ---- COUPLE IDENTITY, on the Coming up board ---------------------------
Gee, 3 Sep: "the colours that you use are very similar to the red overdue
button, so it's making it very difficult to see that... we don't want to
use any reds or any oranges there for the client colours."
The board was borrowing the six tokens above, and that was wrong twice
over. Tangerine MEANS overdue and emerald MEANS money — so a card outlined
in tangerine was saying "late" in the same breath as the red flag beside
it, and a card outlined in emerald was saying "budget" about a couple. The
palette above is a vocabulary, not a set of six nice colours to reach for.
So the couples get a set of their own, and it is deliberately COOL end to
end — 150° through 300°, green to orchid, with nothing warm in it. That is
the whole trick: overdue red is then the only warm thing on the board, and
it separates at a glance without having to shout.
Six hues is already crowded, so they are spaced ~30° apart rather than
chosen one at a time. The named value is the readable dark end, as above;
-soft is the very light pastel the card is filled with. */
--cu-1: #00707d; --cu-1-soft: #e8f6f7; /* cyan-teal */
--cu-2: #16609c; --cu-2-soft: #e9f1fa; /* ocean */
--cu-3: #3d4fa8; --cu-3-soft: #eceefa; /* indigo */
--cu-4: #6d3fae; --cu-4-soft: #f2ecfa; /* violet */
--cu-5: #93359e; --cu-5-soft: #f8ecf9; /* orchid */
--cu-6: #12775a; --cu-6-soft: #e8f6f0; /* green */
/* One hover for all six. A white wash lifts any of the pastels above without
needing a hover colour per hue, and it cannot go warm by accident. */
--cu-hover: rgba(255, 255, 255, .68);
/* The vivid mid-tones, for borders and anything that is not type on tint. */
--v-mint: #00bfa5;
--v-sky: #0091ea;
--v-grape: #6200ea;
--v-magenta: #e8197a;
--v-tangerine: #ff6f00;
--v-emerald: #00c853;
/* ---- BUTTON FILLS -----------------------------------------------------
Gee, 30 Aug: "I don't think that you've looked at the checklist in the
buttons there and the colors there... I think you haven't looked at them
to go in sync with those color palettes."
She was right, and the reason is worth writing down. The toolbar buttons
DID read the category tokens — but those tokens are the dark TEXT ends of
each hue, meant for type on a tint. Used as a solid fill they come out
muddy, which is exactly the "not vibrant" complaint.
The vivid ends cannot be used either: white on #00c853 is 2.24:1 and
unreadable. So these are the brightest value in each hue that still holds
a white label at 4.5:1, found by walking each hue from its vivid end
toward its dark one rather than by eye. Bright green buttons with white
writing are not a thing that can exist; this is as close as the hue gets.
---------------------------------------------------------------------- */
/* SECOND ATTEMPT, and the first one was wrong in a way worth keeping.
Gee, 30 Aug, looking at three Copy buttons in a row: "are you sure that
the amber color is correct? I just don't feel like the coloring is
correct."
She was right. Forcing a hue dark enough to carry WHITE is what turned
orange into mud — #be5100 is not tangerine, it is brown, and three of
them side by side is the ugliest thing on that screen.
The mistake was assuming a coloured button must have white writing. Turn
it round and the problem disappears: a VIVID fill with dark ink of its own
family is both brighter and MORE readable. Orange goes from 4.81:1 muddy
to 5.59:1 vivid. So the light-friendly hues get dark ink, and the
naturally dark ones — grape, pink — keep white. The fills are one family
either way, which is what makes it read as a system rather than a mix. */
--btn-sky: #0091ea; --ink-sky: #002336;
--btn-emerald: #00c853; --ink-emerald: #00301a;
--btn-tangerine: #ff6f00; --ink-tangerine: #3d1a00;
--btn-mint: #00bfa5; --ink-mint: #002e28;
--btn-pink: #d1176e; /* the brand, one shade deeper, for white type */
/* No longer used on a button. Kept because removing a token that something
might still reference is how you get an invisible control — and because
the reason it left is worth reading: magenta and the brand pink measured
3.7 apart on Lab, and anything under 15 reads as the SAME colour. "Apply
budget" and "+ Add line" were sitting side by side looking identical,
which is what Gee kept pointing at. Pink now means one thing: the single
main action on a screen. Nothing else is allowed near it. */
--btn-magenta: #dd1874;
--btn-grape: #6200ea;
--btn-crimson: #d50000;
/* Structure — headings, rules, the spine of a table. */
--blue: #1e3f7d;
--blue-soft: #eef2fa;
--blue-rule: #c3d0e8;
/* Warm-biased neutrals. A pure grey next to hot pink reads as dirty. */
--ink: #2a2126;
--ink-soft: #6c6067;
--ink-faint: #a0949a;
/* --muted was used in 23 places and defined in none of them, so every one of
those declarations was invalid and the browser threw it away — 23 pieces of
secondary text rendering in full-strength ink instead of stepping back. A
TBC supplier's name, the text on a declined change request, the Notion pull
detail lines, the template descriptions, the empty cells in the supplier
coverage grid.
Defined rather than find-and-replaced: the name is a good one and reads
better than --ink-soft at the point of use, so making it real is worth more
than removing it. Found 31 Aug 2026 while verifying the colour sweep — the
audit counts never showed it, because a colour that never renders is not a
colour anybody counts. */
--muted: var(--ink-soft);
--line: #ece5e8;
--line-soft: #f5f0f2;
--surface: #ffffff;
--surface-soft:#faf7f9;
--surface-warm:#fdf6f9;
--danger: #b3001b;
--danger-tint: #fdeeec;
/* "There is no ceremony." Not a warning, not an error — a confirmed absence,
and the one thing on a run sheet a supplier must not skim past. Vibrant
rather than the deep --danger above, which is tuned to sit quietly next to
body text and reads as brown at card size. Gee: "I want a big, vibrant red
so people can easily distinguish it."
⚠️ BRIGHTENED AGAIN 11 Sept — "it needs to be a nicer red, a bit more of a
brighter red". #ef0000 rather than pure #ff0000: pure red sits at about
4.0:1 on white, under the 4.5 a normal-weight word needs to stay readable,
and this line is printed and read at a venue. #ef0000 is ~4.85:1 — visibly
brighter than the maroon it replaced, and still legible on paper. */
--absent: #ef0000;
/* ------------------------------------------------------------------------
Status. Three colours, one meaning each, everywhere.
Gee, 28 Aug: "I think we should have green mean confirmed, and maybe
orange or change. We should have consistent color coding on the platform."
Then, seeing it applied to every run sheet line: "why would we have
confirmed on the running sheet? I'm a little bit confused."
She was right, and it is the rule that makes the rest work: a colour only
appears when it wants something from you. Plain means settled. Sixty green
badges on a run sheet is not reassurance, it is noise, and it teaches you
to stop reading badges at all.
So green earns its place only where a FINISH is worth seeing at a glance —
Paid, Done — and never as "this line is fine".
Chosen to sit with the pink and the teal rather than shout over them: a
deep sage, a burnt amber, and a wine red that is close enough to --pink
not to fight it.
---------------------------------------------------------------------- */
/* The traffic lights, in Confetti terms. Gee, 30 Aug: "I actually don't
think it's site-wide at all" — she was right. Changing the six category
tokens did nothing for these, because "done", "due soon" and "overdue"
were written as raw hex in a hundred places rather than read from here.
Crimson is new. Confetti had no red: magenta is the brand and tangerine
is a warning, so genuine danger had nowhere to go and the app had drifted
into using four different reds for it. */
--ok: #00733d; --ok-tint: #d6f7e2; /* emerald — done, paid */
--warn: #d4121f; --warn-tint: #ffe3e4; /* tangerine — due soon */
--late: #b3001b; --late-tint: #ffe0e3; /* crimson — overdue */
--late-vivid:#d50000;
--warn-mid: #ffb74d; /* borders and dots, where a tint would vanish */
/* Bloom: generous corners, and shadows tinted with the brand rather than
black, so an elevated card still looks like it belongs to this palette. */
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 22px;
--radius-pill: 999px;
--shadow: 0 1px 2px rgba(74, 30, 52, .04), 0 8px 24px rgba(74, 30, 52, .06);
--shadow-soft: 0 2px 10px rgba(74, 30, 52, .05);
--shadow-lg: 0 18px 50px rgba(74, 30, 52, .16);
--display: "Bricolage Grotesque", "Figtree", -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;
--sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Headings are ink, not pink. Pink stops being a shout when it stops being
every heading on the page — it goes back to meaning "look here". */
h1, h2, h3 {
color: var(--ink);
font-family: var(--display);
font-weight: 700;
font-size: 1.15rem;
margin: 0;
line-height: 1.2;
letter-spacing: -.02em;
text-wrap: balance;
}
a { color: var(--teal-deep); }
[hidden] { display: none !important; }
/* ---------- wordmark ------------------------------------------------------ */
.wordmark {
color: var(--pink);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: .11em;
text-transform: uppercase;
margin: 0;
}
/* ---------- boot / loading ------------------------------------------------ */
.boot {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
color: var(--ink-faint);
letter-spacing: .04em;
}
/* ---------- login --------------------------------------------------------- */
.login-view {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 24px;
}
.login-card {
width: 100%;
max-width: 380px;
border: 1px solid var(--line);
border-top: 3px solid var(--pink);
border-radius: var(--radius);
padding: 34px 30px 30px;
box-shadow: var(--shadow);
}
.login-card .wordmark { text-align: center; }
.login-card h1 {
font-size: 1.35rem;
text-align: center;
margin: 6px 0 26px;
}
.login-card label {
display: block;
margin-bottom: 6px;
color: var(--teal);
font-size: .74rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
}
.login-card input { margin-bottom: 18px; }
/* ---------- form controls ------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--teal);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--ink);
font-family: inherit;
font-size: .93rem;
transition: box-shadow .12s ease, border-color .12s ease;
}
textarea {
min-height: 78px;
resize: vertical;
}
select {
appearance: none;
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
padding-right: 32px;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--pink);
box-shadow: 0 0 0 3px var(--pink-tint);
}
input::placeholder { color: var(--ink-faint); }
/* ---------- buttons ------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: none;
color: var(--ink);
font-family: inherit;
font-size: .9rem;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* The one filled button on a screen — + Add task, Save changes, Sign in.
--btn-pink, not --pink. The brand pink is #e8197a and it stays that
everywhere it is TYPE: the wordmark, a couple's name, a countdown. But
white on it is 4.33:1, just under readable, and this is the button people
press hardest and most often. #d1176e is the same pink a shade deeper —
indistinguishable beside the brand at button size — and clears it at
5.17:1. The brand is untouched; only the fill under white text moved. */
.btn-primary { background: var(--btn-pink); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--pink-deep); }
.btn-secondary { border-color: var(--teal); color: var(--teal-deep); }
.btn-secondary:hover:not(:disabled) { background: var(--teal-tint); }
/* ---------- the toolbar actions ------------------------------------------
Print, Export, Pull from Notion and Apply were four identical teal outlines
in a row of six. Gee, 29 Aug: "I feel like they should be colourful to
stand out, because they're really not, and I think it's a bit hard to see.
They're on the checklist, the budget, timeline, and suppliers."
A colour per ACTION rather than one loud colour for all of them, so the
colour carries meaning the way the source chips on the emails and the place
tags on the run sheet do — Print is the same blue whether you are on the
budget or the run sheet, so you stop reading the row and start aiming at it.
Filled tints rather than outlines: an outline on white is what these already
were, and the whole complaint is that it does not register.
Selected off the attributes the buttons ALREADY carry, so this colours all
four tabs without touching a line of HTML — and any new Print button
anywhere gets it for free. */
.btn[data-print],
.btn[data-export],
.btn[id^="copy-"],
.btn#pull-from-notion,
.btn[data-action="apply-template"],
.btn[id^="apply-"],
.btn[data-action="save-project-template"],
.btn#save-timeline-template,
.btn#add-invoice,
.btn#add-payment,
.btn#s-new-contact,
.btn#team-add,
.btn#link-add,
.btn#f-newcat-save,
.btn#set-remind-plus,
.btn#set-backup {
border-width: 1px;
font-weight: 600;
}
/* Solid, not tinted. A pale wash on white is barely different from the outline
these already were, and "it's a bit hard to see" was the whole complaint —
see the email chip, which took three attempts to learn the same thing. */
/* ---- OUTLINED, all of them, and only the primary is filled ---------------
Gee, 30 Aug: "some of the buttons are still not looking good, so you can't
see because it's black font."
Right, and it ends a corner I had painted myself into. A coloured button
with WHITE text needs a fill dark enough to carry it, which is what turned
tangerine into brown. Giving it DARK text instead let the fill stay vivid —
but navy on bright blue just reads as black writing on a colour, which
measures fine and looks unfinished. Both roads were wrong because the
premise was: a coloured button must be a filled button.
Outlined, it is neither. The colour is PURE — real #0091ea sky, real
#00c853 emerald, nothing darkened to accommodate type — and the label is
that same colour on white, so nothing anywhere is black on a colour.
It also fixes the thing underneath every round of this: a toolbar of six
filled buttons has no hierarchy. Now one button on each screen is solid
pink and it is the one that matters. Everything else is a quiet coloured
outline that fills on hover, so the colour is still what you touch.
------------------------------------------------------------------------- */
/* Print — sky. Onto paper. */
.btn[data-print] {
border-color: var(--btn-sky); background: transparent; color: #0067a3;
}
.btn[data-print]:hover:not(:disabled) {
background: var(--btn-sky); border-color: var(--btn-sky); color: #fff;
}
/* Export and Download a backup — emerald. Out as a file. */
.btn[data-export],
.btn#set-backup {
border-color: var(--btn-emerald); background: transparent; color: #00733d;
}
.btn[data-export]:hover:not(:disabled),
.btn#set-backup:hover:not(:disabled) {
background: var(--btn-emerald); border-color: var(--btn-emerald); color: var(--ink-emerald);
}
/* Copy — tangerine, and OUTLINED rather than filled.
Out to the clipboard: the Instagram table, the emails, the phone numbers.
Matched on id^="copy-" because two of the three are ghost buttons rather
than secondary ones.
Gee, 30 Aug, on the Suppliers toolbar: "I just don't feel like the coloring
is correct." The hue was right by then — the WEIGHT was not. There are
three Copy buttons and they sit together, so filling all three put a block
of solid orange across half the toolbar and made three minor actions the
loudest thing on the screen.
Outlined fixes the weight without losing the colour or the grouping: still
obviously one family, still obviously buttons, no longer shouting over
Print, Export and the one pink action that actually matters. They fill on
hover, so the colour is still what you touch. */
.btn[id^="copy-"] {
border-color: var(--btn-tangerine);
background: transparent;
color: #d4121f;
}
.btn[id^="copy-"]:hover:not(:disabled) {
background: var(--btn-tangerine);
border-color: var(--btn-tangerine);
color: var(--ink-tangerine);
}
/* ---- bringing something IN ----------------------------------------------- */
/* Pull from Notion — indigo. Arriving from somewhere else. */
.btn#pull-from-notion,
.btn#pull-contacts-notion {
border-color: var(--btn-grape); background: transparent; color: #4a00b0;
}
.btn#pull-from-notion:hover:not(:disabled),
.btn#pull-contacts-notion:hover:not(:disabled) {
background: var(--btn-grape); border-color: var(--btn-grape); color: #fff;
}
/* ---- templates ------------------------------------------------------------ */
/* Apply and Save as template — plum, both of them. They are the two ends of
the same thing, and the labels say which end, so one colour for the family
reads better than two colours nobody can keep straight.
Matched on patterns rather than each id by name: naming them one at a time
missed "Apply timeline" on the first go, and would have missed the next. */
.btn[data-action="apply-template"],
.btn[id^="apply-"],
.btn[data-action="save-project-template"],
.btn#save-timeline-template {
border-color: var(--btn-grape); background: transparent; color: #4a00b0;
}
.btn[data-action="apply-template"]:hover:not(:disabled),
.btn[id^="apply-"]:hover:not(:disabled),
.btn[data-action="save-project-template"]:hover:not(:disabled),
.btn#save-timeline-template:hover:not(:disabled) {
background: var(--btn-grape); border-color: var(--btn-grape); color: #fff;
}
/* ---- adding one more of something ---------------------------------------- */
/* Teal, not pink. Pink is reserved for the ONE main action on a screen —
+ Add task, + Add line, + Add supplier. These sit beside it and add a
smaller thing, so they need to be clearly a button without competing with
the button. */
.btn#add-invoice,
.btn#add-payment,
.btn#s-new-contact,
.btn#team-add,
.btn#link-add,
.btn#f-newcat-save,
.btn#set-remind-plus,
/* The Overview's own "+ Add task" — a ghost button, unlike the pink one on the
checklist, which is why colouring btn-secondary alone left it behind. */
.btn.btn-ghost[data-action="add-task"] {
border-color: var(--btn-mint); background: transparent; color: #00695c;
}
.btn#add-invoice:hover:not(:disabled),
.btn#add-payment:hover:not(:disabled),
.btn#s-new-contact:hover:not(:disabled),
.btn#team-add:hover:not(:disabled),
.btn#link-add:hover:not(:disabled),
.btn#f-newcat-save:hover:not(:disabled),
.btn#set-remind-plus:hover:not(:disabled),
.btn.btn-ghost[data-action="add-task"]:hover:not(:disabled) {
background: var(--btn-mint); border-color: var(--btn-mint); color: var(--ink-mint);
}
@media print {
/* None of them belong on the printout they produce. */
.btn.btn-secondary[data-print],
.btn.btn-secondary[data-export] { display: none; }
}
.btn-ghost { color: var(--ink-soft); }
.btn-ghost:hover:not(:disabled) { background: #f5f0f2; color: var(--ink); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-tint); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { background: #b3001b; }
.btn-block { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: .82rem; }
/* ---------- top bar ------------------------------------------------------- */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 14px 26px;
border-bottom: 1px solid var(--line);
}
.topbar-left,
.topbar-right {
display: flex;
align-items: center;
gap: 14px;
}
.biz-name {
padding-left: 14px;
border-left: 1px solid var(--line);
color: var(--ink-soft);
font-size: .88rem;
}
.user-email {
color: var(--ink-soft);
font-size: .84rem;
}
/* ---------- module nav ---------------------------------------------------- */
.modnav {
display: flex;
gap: 4px;
padding: 0 26px;
border-bottom: 1px solid var(--line);
}
.modnav-item {
padding: 11px 4px;
margin-right: 20px;
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--ink-soft);
font-family: inherit;
font-size: .88rem;
font-weight: 500;
letter-spacing: .03em;
cursor: pointer;
}
.modnav-item.is-active {
border-bottom-color: var(--pink);
color: var(--pink);
}
/* ---------- layout -------------------------------------------------------- */
.wrap {
max-width: 1220px;
margin: 0 auto;
padding: 26px;
}
.toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.toolbar .search-field { flex: 1 1 260px; max-width: 380px; }
.toolbar .filter-field { flex: 0 1 210px; }
.count {
margin-left: auto;
color: var(--ink-faint);
font-size: .84rem;
white-space: nowrap;
}
/* ---------- contact cards ------------------------------------------------- */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
}
.card {
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-top: 3px solid var(--teal);
border-radius: var(--radius);
padding: 16px 17px 13px;
background: var(--surface);
transition: box-shadow .14s ease, border-color .14s ease;
}
.card:hover {
border-top-color: var(--pink);
box-shadow: var(--shadow);
}
.card-name {
color: var(--pink);
font-size: 1.04rem;
font-weight: 600;
margin: 0 0 8px;
word-break: break-word;
}
/* THE COUPLE'S NAME IS THE ONE THING ON THE CARD YOU READ FIRST.
Gee, 10 Sept, looking at nine cards at once: "Too much pink happening here.
It's very hard to read. The names of the couple should be in black."
She is right and it is not only the name. Nine cards each carry a pink
border, a pink status pill, a pink progress bar, a pink overdue pill and a
pink heading — and when everything is emphasised, nothing is. The heading is
the piece that has to win, so it stops competing and takes the ink.
⚠️ SCOPED TO .wedding-card DELIBERATELY. `.card-name` is shared with the
contacts list (contacts.js:169), and Gee pointed at the weddings screen.
Contacts is raised with her rather than swept along — if she wants it too it
is one selector, but it is her call, not a tidy-up.
Sits after the base rule rather than editing it, so the contacts list keeps
the brand pink with no second definition to keep in step. */
.wedding-card .card-name { color: var(--ink); }
.pill {
display: inline-block;
padding: 2px 10px;
border: 1px solid var(--teal);
border-radius: 999px;
color: var(--teal-deep);
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
}
.pill-none {
border-color: var(--line);
color: var(--ink-faint);
}
/* Cards are flex columns, so a bare pill would stretch to the full width. */
.card > .pill { align-self: flex-start; }
.card-rows {
margin: 13px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
font-size: .87rem;
}
.card-row {
display: flex;
gap: 9px;
align-items: baseline;
}
.card-row .k {
flex: 0 0 68px;
color: var(--teal);
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
padding-top: 2px;
}
.card-row .v {
flex: 1 1 auto;
min-width: 0;
word-break: break-word;
}
.card-row .v a { text-decoration: none; }
.card-row .v a:hover { text-decoration: underline; }
.card-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.card-actions .spacer { margin-left: auto; }
.file-badge {
display: inline-flex;
align-items: center;
gap: 5px;
}
.file-badge .n {
min-width: 17px;
height: 17px;
padding: 0 5px;
border-radius: 999px;
background: var(--pink-tint);
color: var(--pink);
font-size: .7rem;
font-weight: 700;
line-height: 17px;
text-align: center;
}
/* ---------- project shell ------------------------------------------------- */
.backlink {
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 16px;
padding: 0;
border: none;
background: none;
color: var(--teal-deep);
font-family: inherit;
font-size: .86rem;
cursor: pointer;
}
.backlink:hover { color: var(--pink); }
.project-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-bottom: 16px;
}
.project-head h1 {
font-size: 1.6rem;
margin: 0 0 5px;
word-break: break-word;
}
.project-meta {
display: flex;
gap: 7px;
flex-wrap: wrap;
color: var(--ink-soft);
font-size: .9rem;
}
.project-head-side {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.countdown {
padding: 4px 13px;
border: 1px solid var(--teal);
border-radius: 999px;
color: var(--teal-deep);
font-size: .82rem;
font-weight: 600;
white-space: nowrap;
}
.countdown.is-soon { border-color: var(--pink); color: var(--pink); background: var(--pink-tint); }
.countdown.is-past { border-color: var(--line); color: var(--ink-faint); }
.subnav {
display: flex;
gap: 24px;
margin-bottom: 22px;
border-bottom: 1px solid var(--line);
}
.subnav-item {
padding: 9px 2px;
border: none;
border-bottom: 2px solid transparent;
background: none;
color: var(--ink-soft);
font-family: inherit;
font-size: .87rem;
font-weight: 500;
cursor: pointer;
}
.subnav-item.is-active { border-bottom-color: var(--pink); color: var(--pink); }
/* ---------- status pills -------------------------------------------------- */
.pill.status-booked,
.pill.status-in_progress { border-color: var(--pink); color: var(--pink); }
.pill.status-completed { border-color: var(--line); color: var(--ink-faint); }
.pill.status-cancelled { border-color: var(--danger); color: var(--danger); }
/* ---------- progress bar -------------------------------------------------- */
.progress-bar {
height: 6px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.progress-bar > span {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--pink);
transition: width .25s ease;
}
/* ---------- wedding cards ------------------------------------------------- */
.wedding-card { cursor: pointer; }
.wedding-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.card-row .v.is-soon { color: var(--pink); font-weight: 600; }
.card-progress {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.card-progress-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 7px;
color: var(--ink-faint);
font-size: .78rem;
}
/* ---------- overview ------------------------------------------------------ */
.ov-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.ov-card {
border: 1px solid var(--line);
border-top: 3px solid var(--teal);
border-radius: var(--radius);
padding: 16px 17px;
}
/* Recent activity had NO styling whatsoever — not one rule for .act-list,
.act-who, .act-what, .act-when or .ov-wide. It rendered as a raw unstyled
, which is most of why Gee said "I can't see anything on this screen...
this is a terrible way of looking at it". Everything below is new. */
/* Two columns wide where there is room. It is the busiest card on the page. */
.ov-wide { grid-column: span 2; }
@media (max-width: 780px) { .ov-wide { grid-column: 1 / -1; } }
/* Recent activity now sits ABOVE the grid rather than as its last cell, so it
is no longer a grid child and grid-column means nothing to it. Full width
and its own bottom margin, otherwise it would sit flush against the checks
panel below it. */
.ov-activity-first {
grid-column: auto;
margin-bottom: 16px;
}
.ov-card h3 .act-badge {
margin-left: 8px;
padding: 2px 8px;
border-radius: 999px;
background: var(--pink-tint);
color: var(--pink);
font-size: .68rem;
letter-spacing: 0;
text-transform: none;
}
/* The header carries a badge, a filter and a button. Let them sit on one line
and wrap rather than stretching the heading. */
.ov-card h3:has(.act-badge) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.act-filter {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .72rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--ink-faint);
cursor: pointer;
}
/* THE important one. Uncapped, forty entries stretched the whole grid row to
about three screens and pushed the checks panel off the bottom of the page.
A column that can push the page around decides what everything else is
worth. It scrolls inside itself now. */
.act-list {
margin: 0;
padding: 0;
list-style: none;
max-height: 340px;
overflow-y: auto;
}
.act {
display: grid;
grid-template-columns: 1fr auto;
gap: 2px 12px;
padding: 9px 2px;
border-top: 1px solid var(--line);
font-size: .86rem;
line-height: 1.45;
}
.act:first-child { border-top: 0; }
.act-who { font-weight: 700; color: var(--ink); }
.act-what { grid-column: 1; color: var(--ink-soft); }
.act-when { grid-column: 2; grid-row: 1; color: var(--ink-faint); font-size: .76rem; white-space: nowrap; }
.act-detail {
grid-column: 1 / -1;
color: var(--ink-faint);
font-size: .8rem;
/* A pasted comment can be a paragraph. Two lines, then stop. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* The couple's own actions are the reason to read this at all. */
.act.is-client .act-who { color: var(--pink); }
.act.is-new { background: var(--pink-tint); border-radius: 6px; }
.act.is-empty { color: var(--ink-faint); border-top: 0; display: block; }
.ov-card h3 {
margin: 0 0 12px;
color: var(--teal);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.ov-big {
margin: 11px 0 3px;
color: var(--pink);
font-size: 1.25rem;
font-weight: 600;
}
.ov-sub { margin: 0; color: var(--ink-faint); font-size: .82rem; }
.ov-actions {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 15px;
}
.ov-list { list-style: none; margin: 0; padding: 0; }
.ov-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 7px 0;
border-bottom: 1px solid var(--line);
font-size: .87rem;
}
.ov-list li:last-child { border-bottom: none; }
.ov-list .ov-task { flex: 1 1 auto; min-width: 0; }
.ov-list .ov-when { flex: 0 0 auto; color: var(--ink-faint); font-size: .78rem; white-space: nowrap; }
.ov-list .ov-when.is-overdue { color: var(--danger); font-weight: 600; }
.ov-list .ov-none { color: var(--ink-faint); }
.ov-dl { margin: 0; font-size: .87rem; }
.ov-dl dt {
color: var(--teal);
font-size: .68rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
margin-top: 10px;
}
.ov-dl dt:first-child { margin-top: 0; }
.ov-dl dd { margin: 2px 0 0; word-break: break-word; }
/* ---------- checklists ---------------------------------------------------- */
.filter-field.wide { flex: 0 1 300px; }
.check-inline {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--ink-soft);
font-size: .85rem;
white-space: nowrap;
cursor: pointer;
}
.check-inline input { width: 15px; height: 15px; accent-color: var(--teal); }
/* A group of fields a tick has just answered for — the ceremony boxes under
"No ceremony on the wedding day".
Faded, NOT disabled. Gee can tick it, learn there is a ceremony after all,
and type straight back in without hunting for the tick to reopen the boxes.
`opacity` alone also leaves whatever she typed readable, which matters:
nothing here is ever wiped, so a stale 2:00 pm must stay visible rather than
greyed into nothing. Full strength returns the moment she hovers or lands in
one, so a field she is actually working in is never the dim one. */
.is-not-applicable {
opacity: .45;
transition: opacity .15s ease;
}
.is-not-applicable:hover,
.is-not-applicable:focus-within { opacity: 1; }
.task-group { margin-bottom: 26px; }
.task-group-head {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 10px;
padding-bottom: 7px;
border-bottom: 1px solid var(--line);
color: var(--pink);
font-size: .8rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.task-group-count {
color: var(--ink-faint);
font-size: .75rem;
font-weight: 500;
letter-spacing: .03em;
}
.task-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.task-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 10px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
}
.task-row:hover {
border-color: var(--line);
background: #faf7f9;
}
.task-check {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 2px;
accent-color: var(--teal);
cursor: pointer;
}
.task-main { flex: 1 1 auto; min-width: 0; }
.task-title {
display: block;
font-size: .92rem;
word-break: break-word;
}
.task-row.is-done .task-title {
color: var(--ink-faint);
text-decoration: line-through;
}
.task-meta {
display: block;
margin-top: 2px;
color: var(--ink-faint);
font-size: .78rem;
}
.task-meta .dot { margin: 0 7px; }
.task-meta .due.is-overdue { color: var(--danger); font-weight: 600; }
.task-meta .due.is-soon { color: var(--pink); font-weight: 600; }
.task-meta .task-wedding { color: var(--teal-deep); }
/* .task-actions — the right-hand strip that held the clip and Details — is
gone. Both buttons moved into the left gutter on 28 Aug, at Gee's request:
"I'd much rather have the details and also the attachment clip on the
left-hand side where we've got delete plus and stuff." */
.overdue-pill {
display: inline-block;
margin-left: 7px;
padding: 1px 9px;
border-radius: 999px;
background: var(--danger-tint);
color: var(--danger);
font-size: .74rem;
font-weight: 700;
}
/* The Suppliers tab's missing-details pills (19 Oct). The same pink note as
ever, now a button: press one to show only those suppliers. The pressed one
gets a ring, so she can see why the table is short. */
#supplier-warnings { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: 7px; }
#supplier-warnings .overdue-pill { margin-left: 0; }
.sup-gap, .sup-gap-all {
border: 0;
font-family: inherit;
line-height: 1.6;
cursor: pointer;
}
.sup-gap:hover { filter: brightness(.96); }
.sup-gap[aria-pressed="true"] { outline: 2px solid var(--danger); outline-offset: 1px; }
.sup-gap-ok {
display: inline-block;
padding: 1px 9px;
border-radius: var(--radius-pill);
background: var(--ok-tint);
color: var(--ok);
font-size: .74rem;
font-weight: 700;
}
.sup-gap-all {
padding: 1px 9px;
border-radius: var(--radius-pill);
background: transparent;
color: var(--danger);
font-size: .74rem;
font-weight: 700;
text-decoration: underline;
}
.sup-gap:focus-visible, .sup-gap-all:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
/* No hover on a phone, so the gutter has to be there all the time or the
buttons are unreachable. */
/* 🛑 MOVED, 18 SEPTEMBER. It used to sit here and never applied — 0,1,0 against
the 0,2,0 `.task-row > .row-gutter { opacity: .38 }` written 6,400 lines
below it. It now lives directly under that rule, carrying `.task-list`.
Kept as a note rather than deleted silently: the comment above it was
correct for a month while the rule under it did nothing. */
/* ---------- empty state --------------------------------------------------- */
.empty {
padding: 60px 20px;
border: 1px dashed var(--line);
border-radius: var(--radius);
text-align: center;
color: var(--ink-soft);
}
.empty strong {
display: block;
margin-bottom: 6px;
color: var(--pink);
font-size: 1.05rem;
}
/* ---------- modal --------------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 5vh 16px;
background: rgba(44, 44, 44, .38);
overflow-y: auto;
}
.modal-box {
width: 100%;
max-width: 620px;
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.modal-box.narrow { max-width: 430px; }
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 1.12rem; }
/* Done at the top of a form that saves itself (budget line, supplier —
20 Oct, CHECK 213). margin-left: auto keeps it beside the ×, not centred
in the head's space-between. */
.modal-head .modal-head-done { margin-left: auto; }
.modal-close {
border: none;
background: none;
color: var(--ink-faint);
font-size: 1.5rem;
line-height: 1;
padding: 0 4px;
cursor: pointer;
}
.modal-close:hover { color: var(--pink); }
.modal-body { padding: 22px; }
.modal-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 22px;
border-top: 1px solid var(--line);
}
.modal-foot .spacer { margin-left: auto; }
/* "Saved 4:12 pm" in the footer of a form that saves itself.
A form with no Save button and no sign of saving asks you to take it on
faith — which is the exact feeling the button was there to prevent. */
.save-stamp {
font-size: .78rem;
color: var(--ink-faint);
margin-right: 4px;
white-space: nowrap;
}
.save-stamp.is-busy { color: var(--ink-faint); }
.save-stamp.is-ok { color: var(--teal-deep); }
.save-stamp.is-bad { color: var(--danger); font-weight: 600; }
/* ---------- form grid ----------------------------------------------------- */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
/* Estimate · Invoice amount · Due date · Terms — four short values that do not
each need half the width of the modal. One row, two on a narrow screen. */
.money-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 620px) {
.money-row { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------------
THE FIELD LABEL STOPS SHOUTING. 3 September.
Gee, on the supplier card: "it's very messy. It's all over the place."
Measured before it was touched: 2063px tall, 22 inputs, and 22 labels — every
one of them in this same ALL-CAPS teal. That is the fault. When every label
shouts equally nothing is important, so the supplier's NAME read exactly as
loud as "where these hours came from".
⚠️ Counted before changing, as she has asked: `.field` appears 147 times
across 22 modals. The supplier card is not badly built — it is the biggest
card built in the app's normal way, so this is a change to the form language
and it lands everywhere at once. Fixing one card would have made it the only
card that looked different, which is the inconsistency she keeps flagging.
Sentence case, ink rather than teal, and no letter-spacing. The caps are kept
for GROUP headings, which is what they were always right for: a heading names
a section, a label names a box, and the two must not look the same.
-------------------------------------------------------------------------- */
.field label {
margin-bottom: 4px;
color: var(--ink);
font-size: .78rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.field .hint {
margin-top: 4px;
color: var(--ink-faint);
font-size: .75rem;
}
/* The "?" that the hint now lives behind — see initFieldHints in ui.js. Small,
quiet, and beside the label rather than under the box, so a row of fields
reads as a row of fields. */
.field label .why,
.field .form-section .why {
margin-left: 6px;
padding: 0;
width: 15px;
height: 15px;
border: 1px solid var(--line);
border-radius: 50%;
background: none;
color: var(--ink-faint);
font: inherit;
font-size: .68rem;
font-weight: 700;
line-height: 1;
vertical-align: 1px;
cursor: help;
}
.field label .why:hover,
.field label .why.is-on,
.field .form-section .why:hover,
.field .form-section .why.is-on {
border-color: var(--teal);
background: var(--c-teal-tint);
color: var(--teal);
}
.form-error {
margin: 14px 0 0;
padding: 9px 12px;
border: 1px solid var(--danger);
border-radius: var(--radius-sm);
background: var(--danger-tint);
color: var(--danger);
font-size: .85rem;
}
.login-card .form-error { margin-top: 16px; }
/* ---------- files --------------------------------------------------------- */
.upload-zone {
padding: 22px;
border: 1px dashed var(--teal);
border-radius: var(--radius);
background: var(--teal-tint);
text-align: center;
}
.upload-zone.is-over {
border-color: var(--pink);
background: var(--pink-tint);
}
.upload-zone p {
margin: 0 0 12px;
color: var(--ink-soft);
font-size: .87rem;
}
.upload-zone .hint {
margin: 10px 0 0;
color: var(--ink-faint);
font-size: .75rem;
}
.file-list {
list-style: none;
margin: 20px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.file-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 11px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
}
.file-thumb {
flex: 0 0 42px;
width: 42px;
height: 42px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
object-fit: cover;
background: #faf7f9;
}
/* A VIDEO IS THE ONE ATTACHMENT YOU HAVE TO WATCH, so it is not a 42px square.
Migration 132, 21 September — Gee's couples send Instagram inspo and a
thumbnail the size of a postage stamp answers nothing about a video.
⚠️ (0,2,0) BEATS `.file-thumb` (0,1,0), so this works wherever it sits in
the file and does not depend on being later. `checks.css` and `bloom.css`
were both checked for a competing rule; neither touches this class.
Black ground on purpose: letterboxing a portrait phone video against the
page's off-white reads as a broken image. */
.file-thumb.file-video {
flex: 0 0 168px;
width: 168px;
height: auto;
max-height: 120px;
object-fit: contain;
background: #000;
}
@media (max-width: 620px) {
/* On a phone it takes the width rather than sitting beside the name. */
.file-thumb.file-video { flex-basis: 100%; width: 100%; max-height: 190px; }
}
.file-icon {
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--pink-tint);
color: var(--pink);
font-size: .62rem;
font-weight: 700;
letter-spacing: .05em;
}
.file-meta { flex: 1 1 auto; min-width: 0; }
.file-meta .fname {
display: block;
font-size: .88rem;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-meta .fsub {
color: var(--ink-faint);
font-size: .76rem;
}
.file-row-actions {
flex: 0 0 auto;
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
/* "on their supplier card" sits among the buttons, outside .file-meta, so the
rule above never reached it and it drew at full body size beside a faint
Save — 1 Oct, La Belle Venues. Same small grey as the line under the name. */
.file-row-actions .fsub {
color: var(--ink-faint);
font-size: .76rem;
}
/* "Where does this belong?"
The two questions a document on the wedding's Files tab cannot answer for
itself. Everything in the app hangs off a wedding and a supplier; a file
here carries only the wedding, so it asks for the other one and then takes
the same path a supplier's contract takes.
Deliberately plain and deliberately small: this is a step on the way to the
offers below it, not a feature of its own. */
.ar-where {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 10px 0 4px;
padding: 10px 12px;
border: 1px solid var(--line);
border-left: 3px solid var(--c-plum);
border-radius: var(--radius-sm);
background: var(--surface-soft, #faf7f9);
}
.ar-where-q {
margin: 0;
font-size: .84rem;
font-weight: 700;
color: var(--c-plum);
}
.ar-where-f {
display: flex;
align-items: center;
gap: 6px;
font-size: .8rem;
color: var(--ink-soft);
}
.ar-where-f select { font: inherit; padding: 5px 8px; }
.ar-money:empty { display: none; }
.ar-money { margin-top: 8px; }
/* The controls on a document.
Gee, 16 September: "I can't see it, I can't read it, and it's very hard to
find it... maybe more of a proper button like we have in other places."
Measured before changing anything: 12.5px type in a 28px-high control, and
bloom.css restyles EVERY .btn-secondary as a white pill with a 1px
var(--line) border - the same colour as a divider. On a white card that is
a button you have to already know is there.
⚠️ bloom.css's rule is app-wide and deliberate, so it is NOT touched. This
is scoped to a document row, where four small controls sit together and the
neutral treatment stops working.
Bigger type, a real target, and - the actual point - the one control that
DOES something stops looking like the three that do not. Read it, and every
apply, is now filled. Open and Save stay quiet; Delete stays quietest of
all, which checks.css already handles. */
.file-row-actions .btn {
font-size: .84rem;
padding: 8px 14px;
min-height: 34px;
}
.file-row-actions .btn-secondary {
border-color: var(--teal);
color: var(--teal-deep);
}
.file-row-actions [data-read-bf],
.file-row-actions [data-read-as-invoice],
.file-row-actions [data-apply-read],
.file-row-actions [data-apply-bank] {
background: var(--btn-pink);
border-color: var(--btn-pink);
color: #fff;
font-weight: 600;
}
.file-row-actions [data-read-bf]:hover:not(:disabled),
.file-row-actions [data-read-as-invoice]:hover:not(:disabled),
.file-row-actions [data-apply-read]:hover:not(:disabled),
.file-row-actions [data-apply-bank]:hover:not(:disabled) {
background: var(--pink-deep);
border-color: var(--pink-deep);
}
/* The same treatment where the couple's attachment is promoted, so "this
document can be worked on" looks the same wherever it appears. */
.comment .bc-file {
background: var(--btn-pink);
border-color: var(--btn-pink);
color: #fff;
font-weight: 600;
font-size: .82rem;
padding: 7px 13px;
margin-left: 8px;
}
.comment .bc-file:hover:not(:disabled) {
background: var(--pink-deep);
border-color: var(--pink-deep);
}
.muted-note {
color: var(--ink-faint);
font-size: .85rem;
text-align: center;
padding: 18px 0 4px;
}
/* ---------- progress ------------------------------------------------------ */
.progress {
height: 4px;
margin-top: 14px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.progress span {
display: block;
height: 100%;
width: 0;
background: var(--pink);
transition: width .2s ease;
}
/* ---------- toasts -------------------------------------------------------- */
.toasts {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 200;
display: flex;
flex-direction: column;
gap: 9px;
}
.toast {
min-width: 220px;
max-width: 380px;
padding: 11px 15px;
border: 1px solid var(--teal);
border-left: 3px solid var(--teal);
border-radius: var(--radius-sm);
background: var(--surface);
box-shadow: var(--shadow);
font-size: .87rem;
animation: toast-in .18s ease;
}
.toast.is-error {
border-color: var(--danger);
border-left-color: var(--danger);
color: var(--danger);
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 620px) {
.form-grid { grid-template-columns: 1fr; }
.wrap { padding: 18px 15px; }
.topbar { padding: 12px 15px; }
.modnav { padding: 0 15px; }
.count { margin-left: 0; width: 100%; }
.toolbar .search-field,
.toolbar .filter-field { flex-basis: 100%; max-width: none; }
}
/* ---------- budget ---------------------------------------------------------- */
.modal-box.wide { max-width: 860px; }
/* ---------- the two big forms --------------------------------------------
Not every form is the same size, and until now every box was.
The supplier form carries FORTY controls — roles, describe, where, driver,
terms, contact, coverage, access, start, finish, where the hours came from,
dietary, notes, messages — in the same 620px box as a two-field one. Gee,
29 Aug: "when you go to edit the supplier, it's real full on and it would
be good to be able to do that in a full page. Not just the screen like
that... to open up in full view."
.full is that page: it takes the screen rather than floating on it.
.xwide is the budget line, which is smaller but still has a payment
schedule that has to be read across.
Deliberately separate from .wide, which the wedding form uses and which is
the right size for what it holds — widening that one to fix this one would
be changing a screen nobody complained about. */
.modal-box.full {
max-width: min(1320px, 96vw);
min-height: 88vh;
display: flex;
flex-direction: column;
}
/* ⚠️ A SIZE, NOT A CHANGE TO `.full`.
Gee, 7 Sept: "Do you think that screen has to be that large now that we've
moved everything and fixed up the spacing?"
No — but `.modal-box.full` is shared by every large modal, and the supplier
card genuinely needs 1320: its widest row is 1,050px of boxes. Narrowing the
shared class would have squeezed that one to fix this one.
The contact card's widest row is now 1,090px, so 1160 holds it with air.
`min-height` goes too — the card is roughly 600px of content and was being
held open at 88vh, which is where all the empty space below Notes came from.
To narrow another modal: measure its widest .tight-row, add ~70, add the
class. Do not reach for `.full`. */
.modal-box.full.snug {
max-width: min(1160px, 94vw);
min-height: 0;
}
/* ⚠️ `min-height: 0` IS NOT ENOUGH ON ITS OWN, and this cost an attempt.
`.modal:has(> .modal-box.full)` sets `align-items: stretch`, which pulls the
box to the full height of the screen whatever its min-height says. On the
project form that left ~250px of white under Notes even with `snug` — Gee
photographed it: "it's not using the best space. And it looks overwhelming."
`align-self: start` lets it be as tall as its content. `max-height` keeps the
head and foot pinned and the body scrolling on a long form, which is the job
`stretch` was doing.
Scoped to this modal by id ON PURPOSE. The contact card and Key details share
`.snug` and both are stretched the same way, so both are probably carrying
some of this too — but Gee signed those off on 7 Sept and they are not what
she asked about. Raised, not changed. */
/* Measured on 8 Sept, empty, at a 1000px viewport — the white space each of
these was holding open below its own content:
Contact card 524px of form in a 960px box 436px of nothing
Budget line 536px of form in a 960px box 424px of nothing
Key details 743px of form in a 960px box 217px of nothing
New wedding 739px of form in a 744px box 5px (already fixed)
`.snug` alone does not do it — two of these already had `.snug`. The height
comes from `align-items: stretch` on the modal, which pulls the box to the
full screen whatever its min-height says.
⚠️ WIDTHS ARE UNTOUCHED. This removes empty space and changes nothing else,
which is why it is safe on three cards Gee has already signed off. The
budget line is deliberately NOT given `.snug`: that class also narrows to
1160, and its widest row is four 307px boxes. Narrowing it is a layout
decision and hers to make. */
#wedding-modal .modal-box.full.snug,
#timeline-event-modal .modal-box.full.snug,
#contact-modal .modal-box.full,
#timeline-details-modal .modal-box.full,
#budget-modal .modal-box.full,
#supplier-modal .modal-box.full {
align-self: start;
max-height: 96vh;
/* TWO separate rules hold a card open, and align-self only answers one.
`.modal-box.full` also carries `min-height: 88vh`, and the other cards
escape it through `.snug` — which the budget line must not have, because
`.snug` narrows to 1160 as well and its widest row is four 307px boxes.
Measured after fixing only the stretch: still 880px for 536px of form,
because 88vh of a 1000px screen is 880. So the min-height is zeroed here
on its own, and the width is left exactly as it was.
The SUPPLIER CARD is here for the same reason and with the same care: §34
records that it genuinely needs 1320 — its widest row is 1,050px of boxes —
so it must not be given `.snug` either. It was holding about 100px, the
smallest of the four, and it is the card Gee signed off first. Height only;
the 1320 stays. */
min-height: 0;
}
.modal-box.xwide { max-width: min(1080px, 96vw); }
/* A page, not a card sitting in the middle of one. */
.modal:has(> .modal-box.full) { padding: 2vh 2vw; align-items: stretch; }
.modal-box.full > form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
/* The head and foot stay put; only the fields scroll. On a form this long,
losing the Save button off the bottom of a 2000px page is the difference
between a form and a scavenger hunt. */
.modal-box.full .modal-head,
.modal-box.full .modal-foot { flex: 0 0 auto; }
.modal-box.full .modal-body { flex: 1 1 auto; overflow-y: auto; padding: 24px 28px; }
/* Room means columns. Three across on a laptop, four on a wide screen —
a 240px floor so nothing is ever squeezed into a slot too small to read. */
.modal-box.full .form-grid,
.modal-box.xwide .form-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Compressed. Gee, 29 Aug: "it just needs to be compressed."
Most of the height in this form is not the boxes, it is the sentence under
each one. They stay — they are the difference between a field you can fill
in and one you have to ask about — but they get smaller and tighter, and
the whole form loses about a third of its height. */
.modal-box.full .form-grid { gap: 12px 14px; }
.modal-box.full .hint {
margin-top: 3px;
font-size: .71rem;
line-height: 1.4;
}
/* .68rem was right for an all-caps label, which reads bigger than it measures.
In sentence case it came out at 10.5px — smaller than the hint underneath it.
Caught by measuring the computed style rather than reading the rule. */
.modal-box.full .field label { margin-bottom: 3px; font-size: .78rem; }
.modal-box.full .form-section { margin: 0 0 2px; font-size: .8rem; }
/* Gee, 7 Sept: "I don't feel like we need that much of a gap like we did
previously." Six headings on this form, each one carrying 16px of padding
above its rule — 96px of air on a form that was already scrolling.
Scoped to this modal by id ON PURPOSE. `.modal-box.full .form-section` is
shared with the supplier card and the contact card, and both of those she
has already signed off; this is not the moment to nudge them. */
#timeline-details-modal .form-section { padding-top: 10px; }
/* Several short values on one line rather than one each. */
.tight-row {
display: grid;
grid-template-columns: 1fr;
gap: 10px 14px;
}
@media (min-width: 720px) {
/* ⚠️ FIXED WIDTHS, NOT FRACTIONS — this is the whole fix.
`1fr` shares the row out equally, so a phone number got the same room as a
street address and the group ended up a hand-span wide. Measured on
Signature Chauffeurs, 7 Sept: 5,561px of empty box across 18 fields, with
Instagram holding 616px to show eight characters.
Gee: "There's so much space there that we can really constrict this even
more… it's all over the shop."
`justify-content: start` is what makes the leftovers collect at the END of
the row instead of being shared out between the boxes. Without it every
width below is ignored the moment the row is wider than their sum. */
.tight-row { justify-content: start; }
.tight-row > .field { min-width: 0; }
.tight-row.two { grid-template-columns: 1fr 1fr; }
.tight-row.three { grid-template-columns: 150px 320px 260px; }
.tight-row.four { grid-template-columns: 170px 150px 160px 160px; }
/* Every way to reach a supplier, on one line. Contact · Email · Phone ·
Instagram · Website = 1040px of boxes in a 1320px card. */
.tight-row.reach { grid-template-columns: 170px 280px 150px 190px 250px; }
/* What they do and where they turn up. The venue gets the room because it
holds "Ceremony — St Paul's Cathedral, 209 Flinders Lane, Melbourne VIC
3000" — measured at 498px, and it has been clipping at 300 for weeks. */
.tight-row.what { grid-template-columns: 260px 280px 510px; }
/* The hours, the paperwork they came off, whose money it is. The checkbox
takes what it needs; "Who's paying" only appears once it is ticked, which
is why the row is declared with five columns and usually shows four. */
.tight-row.booked { grid-template-columns: 150px 300px 240px auto 200px; }
/* ---- the contact card, 7 Sept ------------------------------------------
Same treatment, same three rules. Fifteen fields, seven of them claiming a
whole row in a two-column grid. */
/* The business, the person you deal with, and what they do. */
.tight-row.who { grid-template-columns: 280px 240px 340px; }
/* Phone · Email · Website · Instagram. Its own class rather than reusing
.reach: the supplier card's are a different set in a different order, and
one row quietly inheriting the other's widths is the kind of thing that
only shows up on the longest value somebody ever types.
Facebook was removed on 7 Sept — nothing ever read it. */
.tight-row.ways { grid-template-columns: 150px 280px 250px 190px; }
/* The address and the bank block, side by side.
The address was a full-width textarea — about 1,800px of empty box for a
street address — and it was the only reason the bank details sat so far
down the card. `align-items: start` matters: without it the textarea and
the bank block stretch to match each other's height. */
.tight-row.where-and-bank {
grid-template-columns: 340px minmax(0, 1fr);
align-items: start;
}
.tight-row.where-and-bank > .field > textarea { resize: vertical; }
/* ⚠️ A BSB IS SIX DIGITS. It was being handed a third of the card.
These are the numbers she types into a banking app and checks against an
invoice — sized to be read at a glance, not stretched to fill a row.
Leading zeros matter here (013013 is not 13013), which is why they are all
text inputs and why the widths are generous enough to never truncate. */
.tight-row.bank { grid-template-columns: 210px 110px 160px 190px; }
/* ---- Key details, 7 Sept -----------------------------------------------
Nineteen fields, six of them clocks, and 7,621px of empty box — worse than
the supplier card's 5,561. `repeat(auto-fit, minmax(240px, 1fr))` handed a
2:00 pm the same 301px as a street address, and the four fields carrying
`.field.full` each took a 1,245px row to show a date, a word and two
addresses. Gee: "you should be able to compress this so that they're on
similar lines. I don't feel like we need that much of a gap."
Same rules as everywhere else here: real widths, justify-content: start.
Widest row is .ready at 1,012px inside the 1,089 that `snug` leaves. */
/* Both people, both places, one line. */
.tight-row.ready { grid-template-columns: 175px 310px 175px 310px; }
/* The address, then the two times it runs between. St Paul's full address
measures 413px; 470 holds it with room for a longer one. */
.tight-row.ceremony { grid-template-columns: 470px 130px 130px; }
/* Where the reception is. "Upper Level, Southgate Shopping Precinct,
Southbank VIC 3006" measures 444px. */
.tight-row.venue { grid-template-columns: 250px 150px 470px; }
/* Canapes, start, entrance, end. 130px shows "12:00 am" and the little clock
with room to spare — they had 301 each. */
/* Canapé start moved out to its own section in 94; guest arrival came in
with 95. Four again, but four RECEPTION times now — guests in, reception
starts, couple announced, carriages. */
.tight-row.clocks { grid-template-columns: 130px 130px 130px 130px; }
.tight-row.canapes { grid-template-columns: 130px 130px; }
/* ⚠️ THE VENUE ROW HAS THREE BOXES AND BORROWED A TWO-COLUMN PRESET.
Migration 104 added Room reveal beside the two bump times and reused
`.canapes` for its widths — so the third box wrapped onto a second line,
sitting alone under Venue bump-in. Gee asked twice where the room reveal
was: it had been on the page the whole time, one line below where anyone
would look. `.canapes` is left alone because the real canapé row still
uses it and still has two boxes. */
.tight-row.bump { grid-template-columns: 130px 130px 130px; }
/* The question and its two counts. */
.tight-row.party { grid-template-columns: 240px 120px 120px; }
/* One date, sized like a date. */
.tight-row.lock { grid-template-columns: 190px; }
/* The five hour fields. One dropdown that needs words, then four times,
which are narrow — so the first column gets the room and the clocks take
what they need. Below this width they stack rather than being squeezed
into five columns nobody can read. */
.tight-row.five { grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1fr; }
/* ⚠️ A GRID KEEPS ITS COLUMNS WHETHER OR NOT ANYTHING IS IN THEM.
syncTeamTimesFold() in suppliers.js sets this class in the same breath as
it hides the four supplier-level time boxes, so the row cannot be emptied
and full-width at the same time.
Not `.five` any more: Coverage booked moved out to sit with the invoice it
was read off (7 Sept), so every field left in this row hides together and
the row goes entirely. Written class-agnostically so it keeps working if
the row is renumbered again. */
.tight-row.is-solo-hidden { display: none; }
/* ---- The new-wedding form, 8 Sept -------------------------------------
Gee: "How come there's space after service type and budget type? Why can't
you put guest count and budget up there?" — so the row that held three
boxes in five auto-fit columns now holds five real ones.
Second pass the same day: Status joined it — "move the status up next to
maybe budget." Six boxes now, so every width came in a notch to keep the
row inside the 1,089px this card actually has. */
.tight-row.setup { grid-template-columns: 180px 210px 210px 100px 125px 150px; }
/* A couple's names, not a paragraph. This was `.full` — a whole 1,320px row. */
.tight-row.name { grid-template-columns: 420px; }
/* One partner per row: role · first · last · email · phone · Instagram. See
the note in index.html — the per-person grouping used to depend on the
auto-fit grid landing on exactly five columns, and at Gee's own width it
did not. Instagram joined 20 Oct (migration 162); last name and email gave
up 10px and 40px so the six still fit the 1,089px card (1,080 with gaps). */
.tight-row.person { grid-template-columns: 120px 170px 170px 240px 160px 150px; }
/* Event date · Booked date · Planner · All day event · Start time · Venue ·
Location. Status left this row for the top one on 8 Sept; the tick, the
clock and the two places joined it, because Gee asked for them "after
planner".
⚠️ FLEX, NOT GRID — the only row in the app that is, and for a reason.
Splitting these across two rows left 392px dead at the end of one and
530px at the end of the other; Gee: "I still think this can be done
better." A grid cannot wrap, so the two rows could not be merged into one
while Start time still appears and disappears — the seven boxes fit on one
line only while All day is ticked. Flex wraps only what does not fit, so
the usual state is one line and unticking the box pushes Location down
rather than leaving a hole.
Widths are stated per field for the same reason as everywhere else, and
they are sized to the longest value each holds: measured with nothing
clipped, and 44px spare on the line. */
.tight-row.when { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.tight-row.when > .field { flex: 0 0 auto; }
#wedding-modal #w-date-field { width: 135px; }
#wedding-modal #w-booked-field { width: 135px; }
#wedding-modal #w-planner-field { width: 180px; }
#wedding-modal #w-allday-field { width: 125px; }
#wedding-modal #w-time-wrap { width: 125px; }
#wedding-modal #w-venue-field { width: 255px; }
#wedding-modal #w-location-field { width: 160px; }
/* ---- The run sheet line, 8 Sept ---------------------------------------
Nine visible fields, EIGHT of them forced full width: 5,844px of empty box
and 960px of height, with "Visibility" holding 1,264px to show the word
"Everyone". The worst ratio left in the app, and the form she opens most.
⚠️ FLEX, like the project details row, and for the same reason: half these
fields hide by item type — a section heading has no times and no
Responsible — and a display:none GRID item drops its column, shifting
everything after it left. Widths on the fields; the row only flows them. */
#timeline-event-modal .tight-row {
display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end;
}
#timeline-event-modal .tight-row > .field { flex: 0 0 auto; }
#tl-e-type-field { width: 230px; }
#tl-e-time-field,
#tl-e-end-field { width: 130px; }
#tl-e-vis-field { width: 290px; }
#tl-e-place-wrap { width: 420px; }
#tl-e-title-field { width: 600px; }
/* The style bar could not be measured signed out — its swatches are drawn
from the business's own colours. Sized from the Notes toolbar instead,
which has the same shape and measures 442px of content. */
#tl-e-style-field { width: 420px; }
#tl-e-contact-wrap { width: 460px; }
#tl-e-who-wrap { width: 320px; }
/* The one field that genuinely wants the room. */
#tl-e-notes-field { width: 100%; }
/* Gee, 8 Sept: "make the enabled features all on one line instead of on two
separate lines, like the guests and seating to go up."
`repeat(auto-fit, minmax(160px, 1fr))` needed 1,228px for seven boxes and
had 1,104, so "Guests & seating" wrapped alone onto a second line. Sized by
their own labels they need about 640 and fit with room to spare. Scoped to
this modal — `.feature-grid` is the shared class. */
#wedding-modal .feature-grid { grid-template-columns: repeat(7, max-content); }
}
/* Narrower than the full card, the fixed widths stop fitting. Fractions are
right here — there is no spare room to waste, which was the whole complaint. */
@media (min-width: 720px) and (max-width: 1180px) {
.tight-row.five { grid-template-columns: repeat(3, 1fr); }
.tight-row.reach { grid-template-columns: 1fr 1.4fr 1fr; }
.tight-row.three { grid-template-columns: 1fr 1.6fr 1.3fr; }
.tight-row.four { grid-template-columns: repeat(2, 1fr); }
.tight-row.what { grid-template-columns: 1fr 1fr; }
.tight-row.booked { grid-template-columns: repeat(2, 1fr); }
.tight-row.who { grid-template-columns: 1fr 1fr; }
.tight-row.ways { grid-template-columns: 1fr 1.4fr; }
.tight-row.bank { grid-template-columns: repeat(2, 1fr); }
.tight-row.where-and-bank { grid-template-columns: 1fr; }
.tight-row.ready { grid-template-columns: 1fr 1.6fr; }
.tight-row.ceremony { grid-template-columns: 1fr 1fr; }
.tight-row.venue { grid-template-columns: 1fr 1fr; }
.tight-row.clocks { grid-template-columns: repeat(4, 1fr); }
.tight-row.party { grid-template-columns: 1.4fr 1fr 1fr; }
/* The new-wedding form. Rule 4 of the pattern: below the width the stated
pixels fit in, fractions are right — there is no spare room to waste,
which was the whole complaint in the first place. */
.tight-row.setup { grid-template-columns: repeat(3, 1fr); }
.tight-row.name { grid-template-columns: 1fr; }
.tight-row.person { grid-template-columns: repeat(3, 1fr); }
/* Still flex, but the stated widths no longer fit — so the boxes share what
there is and wrap as they need to. */
#wedding-modal #w-date-field,
#wedding-modal #w-booked-field,
#wedding-modal #w-planner-field,
#wedding-modal #w-allday-field,
#wedding-modal #w-time-wrap,
#wedding-modal #w-venue-field,
#wedding-modal #w-location-field { width: auto; flex: 1 1 190px; }
/* Four across rather than seven — seven would be unreadable at this width. */
#wedding-modal .feature-grid { grid-template-columns: repeat(4, max-content); }
/* The run sheet line, narrower: the stated widths stop fitting, so the boxes
share what there is and wrap as they need to. Notes keeps the full width. */
#tl-e-type-field, #tl-e-time-field, #tl-e-end-field, #tl-e-vis-field,
#tl-e-place-wrap, #tl-e-title-field, #tl-e-style-field,
#tl-e-contact-wrap, #tl-e-who-wrap { width: auto; flex: 1 1 200px; }
#tl-e-notes-field { width: 100%; flex: 1 1 100%; }
}
/* ---- The run sheet line, Look A — 18 Oct ---------------------------------
Gee: "Give me colors or something. I can't see anything. Let's make it look
nice as well." Three looks were drawn IN the live form on her Bec & Aleks
Marnong line; she picked A, colour panels. Each of the four rows is its own
soft panel, its name in the panel's colour, labels in that colour, boxes
kept WHITE so a filled box still looks different from an empty one.
⚠️ THE NAMES ARE ::before ON THE ROW, so no markup moved and nothing in
timeline.js changed. A row is flex, so the name takes the whole first line.
⚠️ A ROW WITH EVERY FIELD HIDDEN IS HIDDEN TOO. A heading or a text line has
no Responsible, so the Who row would draw as an empty grape panel.
⚠️ SCOPED TO THIS MODAL ONLY. Supplier, task and budget forms are unchanged
until she says otherwise. */
/* TIGHTER, 18 Oct — Gee: "I think it's a bit too spacious." Tried in the live
form first: 886px of content became 726px and the whole form fits one screen
with Save. The section name sits ON the panel's top edge as a tab instead of
taking a line; Notes says its name once (its own label, styled as the tab
would be); Documents' "Email" box and Choose Files sit side by side. */
#timeline-event-modal .modal-body { display: grid; gap: 18px; padding-top: 22px; padding-bottom: 16px; }
#timeline-event-modal .modal-body > .tight-row {
--sec: var(--v-sky); --sec-tint: var(--c-sky-tint);
position: relative;
margin: 0; padding: 14px 16px 12px; row-gap: 6px; border-radius: 16px;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
}
#timeline-event-modal .modal-body > .tl-e-what { --sec: var(--v-magenta); --sec-tint: var(--pink-tint); }
#timeline-event-modal .modal-body > .tl-e-who-row { --sec: var(--v-grape); --sec-tint: var(--c-indigo-tint); }
#timeline-event-modal .modal-body > .tl-e-notes-row { --sec: #00a68f; --sec-tint: var(--c-teal-tint); }
#timeline-event-modal .modal-body > .tight-row::before {
position: absolute; top: -10px; left: 14px;
padding: 1px 10px; border-radius: 999px; line-height: 1.4;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
color: var(--sec); font-weight: 800; font-size: .78rem;
letter-spacing: .08em; text-transform: uppercase;
}
/* Notes is the one row whose first label already says its name. */
#timeline-event-modal .modal-body > .tl-e-notes-row::before { content: none; }
#timeline-event-modal #tl-e-notes-label {
font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
#timeline-event-modal #tl-e-files-field .s-contract-add {
display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
}
#timeline-event-modal #tl-e-files-field .s-contract-add > * { margin: 0; }
#timeline-event-modal #tl-e-files-field .s-contract-add select { width: auto; min-width: 200px; }
#timeline-event-modal .tl-e-when::before { content: "When & where"; }
#timeline-event-modal .tl-e-what::before { content: "What happens"; }
/* Gee, 18 Oct: "line Item style up beside the Event box." The row lines boxes
up by their BOTTOMS, and the style bar is two swatch rows tall, so its label
sat 41px above "Event *". Tops instead: both labels on one line, the Event
box level with the first row of swatches. Measured live before building. */
#timeline-event-modal .modal-body > .tl-e-what { align-items: flex-start; }
#timeline-event-modal .tl-e-who-row::before { content: "Who"; }
#timeline-event-modal .modal-body > .tight-row:not(:has(> .field:not([hidden]))) { display: none; }
#timeline-event-modal .modal-body > .tight-row .field > label:not(.check-inline) {
color: var(--sec); font-weight: 700;
}
#timeline-event-modal .modal-body > .tight-row input:not([type="checkbox"]),
#timeline-event-modal .modal-body > .tight-row select,
#timeline-event-modal .modal-body > .tight-row .rt-editor {
background: #fff;
border-color: color-mix(in srgb, var(--sec) 40%, transparent);
}
@media (min-width: 1181px) {
/* Narrower than the 420 and 290 above, so Visibility sits on the times'
line even on a time span, with the place's description folded away. */
#tl-e-place-wrap { width: 300px; }
#tl-e-vis-field { width: 200px; }
}
/* ---- The budget line, the same look — 18 Oct -----------------------------
Gee: "This page is a real shit layout. It should be more compressed… You
don't need that big of a space for the due date." Measured first: every box
was 302px whatever it held ("Cash", "$850"), and the window was 1,246px of
content in a 576px view. Mocked up in the live window and she said "that's
so much nicer": 924px. Six panels named on their top edge, as the run sheet
line above. Fields keep their ids; the wrappers are .b-panel in index.html.
⚠️ SCOPED TO #budget-modal. Widths are real pixels with justify-content:
start (tight-row-layout-pattern) and only on a wide screen — under 900px
every field takes the line, as before. */
#budget-modal .modal-box.full { width: 1100px; max-width: calc(100vw - 40px); }
#budget-modal .modal-body { display: grid; gap: 20px; padding-top: 24px; }
#budget-modal .b-panel {
--sec: var(--v-sky); --sec-tint: var(--c-sky-tint);
position: relative; margin: 0; padding: 16px 16px 12px; border-radius: 16px;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; justify-content: start;
}
#budget-modal .b-panel::before {
content: attr(data-name);
position: absolute; top: -11px; left: 14px;
padding: 1px 10px; border-radius: 999px; line-height: 1.4;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
color: var(--sec); font-weight: 800; font-size: .78rem;
letter-spacing: .08em; text-transform: uppercase;
}
#budget-modal .b-p-money { --sec: var(--v-magenta); --sec-tint: var(--pink-tint); }
#budget-modal .b-p-paper { --sec: #00a68f; --sec-tint: var(--c-teal-tint); display: block; }
#budget-modal .b-p-pay { --sec: var(--v-grape); --sec-tint: var(--c-indigo-tint); }
#budget-modal .b-p-talk { --sec: #e8590c; --sec-tint: #fff1e6; display: block; }
#budget-modal .b-p-sched { display: block; }
#budget-modal .b-panel .field { margin: 0; }
#budget-modal .b-panel .field > label:not(.check-inline) { color: var(--sec); font-weight: 700; }
#budget-modal .b-panel input:not([type="checkbox"]),
#budget-modal .b-panel select,
#budget-modal .b-panel textarea {
background: #fff;
border-color: color-mix(in srgb, var(--sec) 40%, transparent);
}
/* The three ticks on one line; their explanations already fold behind a ?. */
#budget-modal .b-p-money > .field.full:not(:has(.money-row)) {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
}
#budget-modal .b-p-money > .field.full:not(:has(.money-row)) .check-inline { margin: 0; }
/* Measured live: .field is flex-direction COLUMN elsewhere in this file, so
"No invoice needed" sat under "Invoice on file". A row, and the two ticks
never need to wrap. */
#budget-modal .b-p-money > .field.full:not(:has(.money-row)) { flex-direction: row; }
#budget-modal .b-p-money > .field.full:has(#b-no-invoice) { flex-wrap: nowrap; }
#budget-modal .b-p-money > .field.full:not(:has(.money-row)) > .hint { display: none; }
#budget-modal #b-pay-why-wrap { flex: 0 0 100%; }
#budget-modal #b-pay-why { max-width: 420px; }
#budget-modal .money-row { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: start; }
/* Paperwork: the empty "No invoice yet" box on one line, not 152px tall. */
#budget-modal .b-p-paper .b-files { margin: 0; }
#budget-modal .b-p-paper .bf-drop {
flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: start;
gap: 6px 14px; padding: 8px 12px; min-height: 0; text-align: left;
}
#budget-modal .b-p-paper .bf-drop-sub { max-width: 46ch; }
#budget-modal .b-p-paper .bf-drop .btn { padding: 6px 16px; margin: 0; }
/* Bank transfer and Pay by card side by side, without their own boxes. */
#budget-modal .b-p-pay > #b-bank-hint { flex: 0 0 100%; margin: 0; }
#budget-modal .b-p-pay .pay-way { margin: 0; border: 0; background: none; padding: 0; }
#budget-modal .b-p-pay .pay-way-head { padding: 0 0 4px; background: none; color: var(--sec); font-weight: 700; }
#budget-modal .b-p-pay .pay-way-body { padding: 0; }
#budget-modal .b-p-pay .pay-way .form-grid { display: flex; flex-wrap: wrap; gap: 8px 10px; }
#budget-modal .b-p-pay .pay-way .hint { display: none; }
#budget-modal .b-p-sched > h4 { display: none; }
#budget-modal .b-p-sched .pay-foot { margin-top: 4px; }
#budget-modal .b-p-talk .comment-list { min-height: 0; padding: 0; margin: 0 0 8px; background: none; }
#budget-modal .b-p-talk .comment-list .empty { padding: 2px 0; margin: 0; text-align: left; font-size: .85rem; }
@media (min-width: 900px) {
#budget-modal .b-p-line > .field:nth-child(1) { width: 230px; }
#budget-modal .b-p-line > .field:nth-child(2) { width: 120px; order: 4; }
#budget-modal .b-p-line > .field:nth-child(3) { width: 290px; }
#budget-modal .b-p-line > .field:nth-child(4) { width: 260px; }
#budget-modal .b-p-money > .field.full:has(.money-row) { flex: 0 0 100%; }
#budget-modal .money-row > .field { width: auto; }
#budget-modal #b-estimate { width: 120px; }
#budget-modal #b-invoiced { width: 150px; }
#budget-modal #b-due { width: 165px; }
#budget-modal .money-row > .field:has(#b-terms-pick) {
display: grid; grid-template-columns: 190px 280px; column-gap: 8px;
}
#budget-modal .money-row > .field:has(#b-terms-pick) > label { grid-column: 1 / -1; }
#budget-modal .b-p-pay .pay-way .form-grid > .field { width: auto; }
#budget-modal #b-acct-name { width: 190px; }
#budget-modal #b-bsb { width: 100px; }
#budget-modal #b-acct-no { width: 130px; }
#budget-modal #b-payid { width: 170px; }
#budget-modal #b-pay-link { width: 300px; }
}
/* ---- The supplier card, the same look — 18 Oct ----------------------------
Gee said yes to the mock-up drawn in the live card on Oguzhan & Amal's Focus
Films (1,183px → 1,091px — mostly easier to read; the card was already
tightened in September and keeps its 1320px for its widest row). Five
panels, wrappers in index.html. ⚠️ THE GREY HINTS STAY: the mock-up hid
three that are NOT behind a ?, and a hint is the difference between a field
she can fill and one she has to ask about (hints-already-fold-behind-a-?).
⚠️ Teams, Who to call and the couple's messages already carry their own
heading (and its ? sits inside it), so those panels use THAT heading as the
tab instead of a second name on the edge. */
#supplier-modal .modal-body > .form-grid { gap: 18px 14px; padding-top: 10px; }
#supplier-modal .s-panel {
--sec: var(--v-sky); --sec-tint: var(--c-sky-tint);
grid-column: 1 / -1; position: relative; margin: 0;
padding: 14px 14px 10px; border-radius: 16px;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
display: grid; gap: 6px; min-width: 0;
}
/* Measured live after the first ship: 1,286px — TALLER than the 1,183 it
replaced, because the hints stayed and the three panels with their own
heading spent a line on it. Their heading now IS the tab on the panel's
edge (its ? inside it still opens the hint — pressed on Teams): 1,134px. */
#supplier-modal .s-p-crews > .field:first-child > h4.form-section,
#supplier-modal .s-p-call > .field:first-child > h4.form-section,
#supplier-modal .s-p-talk > label {
position: absolute; top: -11px; left: 14px; margin: 0 !important; z-index: 1;
padding: 1px 10px; border-radius: 999px; line-height: 1.4;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
color: var(--sec); font-weight: 800; font-size: .78rem;
letter-spacing: .08em; text-transform: uppercase;
}
#supplier-modal .s-panel::before {
content: attr(data-name);
position: absolute; top: -11px; left: 14px;
padding: 1px 10px; border-radius: 999px; line-height: 1.4;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
color: var(--sec); font-weight: 800; font-size: .78rem;
letter-spacing: .08em; text-transform: uppercase;
}
#supplier-modal .s-p-money { --sec: var(--v-magenta); --sec-tint: var(--pink-tint); }
#supplier-modal .s-p-crews { --sec: var(--v-grape); --sec-tint: var(--c-indigo-tint); }
#supplier-modal .s-p-call { --sec: #00a68f; --sec-tint: var(--c-teal-tint); }
#supplier-modal .s-p-talk { --sec: #e8590c; --sec-tint: #fff1e6; }
#supplier-modal .s-p-crews::before,
#supplier-modal .s-p-call::before,
#supplier-modal .s-p-talk::before { content: none; }
#supplier-modal .s-panel .form-section,
#supplier-modal .s-p-talk > label { color: var(--sec); }
#supplier-modal .s-panel .field { margin: 0; }
#supplier-modal .s-panel .tight-row { margin: 0; }
#supplier-modal .s-panel label:not(.check-inline) { color: var(--sec); font-weight: 700; }
#supplier-modal .s-panel input:not([type="checkbox"]):not([type="file"]),
#supplier-modal .s-panel select,
#supplier-modal .s-panel textarea {
background: #fff;
border-color: color-mix(in srgb, var(--sec) 40%, transparent);
}
/* The contract "kind" picker was 1,170px wide for one word. */
#supplier-modal #s-contract-kind { width: 220px; display: inline-block; }
#supplier-modal .s-p-talk .comment-list li.comment.is-empty { padding: 0; min-height: 0; font-size: .85rem; }
@media (min-width: 1181px) {
/* The green Budget / Paid by / Files box laid out wide: four lines → two. */
/* Still five columns: "Who's paying" appears once Not the couple's budget
is ticked (the rule this narrows, ~line 1972). */
#supplier-modal .tight-row.booked { grid-template-columns: 150px 260px 220px minmax(0, 1fr) auto; }
#supplier-modal .tight-row.booked > .field:nth-child(4) { width: auto; }
#supplier-modal .tight-row.booked .sbh-panel { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; width: auto; }
#supplier-modal .tight-row.booked .sbh-row { display: flex; gap: 8px; align-items: center; width: auto; }
#supplier-modal .tight-row.booked .sbh-row select { width: auto; }
}
/* ---- Budget and Suppliers tables: frozen names, less gap — 18 Oct ---------
Gee: "I don't love that I've got all that gap in between when it goes
across the screen. It would be nice if the pane was frozen because you
can't see… who you're looking at." Measured: the budget's Supplier column
was 698px (nowrap, sized by its longest row) in a 1,723px table inside a
1,168px page. Mocked up live, then "just fix everything".
- Both tabs get more of the screen (the page stays 1,220 everywhere else).
- Budget: Supplier is 470px and pinned left; long "for what" notes trim
with … ; the category heading (.bg-cat-in) and the subtotal label pin too.
- Suppliers: Role and Supplier pinned left (170 + 220).
⚠️ THE COUPLE'S BUDGET GETS THE FROZEN NAMES TOO. Their portal shows this
same #wtab-budget, moved (§36.1) — checked in "Preview as couple" on
18 Oct: names pinned, the page itself stays its normal width. Wide screens
only, so a phone is unchanged. */
@media (min-width: 1181px) {
main.wrap:has(#wtab-budget:not([hidden])),
main.wrap:has(#wtab-suppliers:not([hidden])) { max-width: min(1600px, calc(100vw - 40px)); }
#wtab-budget .bg-table thead th:first-child,
#wtab-budget .bg-table td.bg-supplier,
#wtab-budget .bg-table tr.bg-subtotal > td:first-child {
position: sticky; left: 0; z-index: 2;
background: var(--surface, #fff);
box-shadow: 6px 0 6px -6px rgba(80, 30, 60, .3);
}
#wtab-budget .bg-table tr.bg-subtotal > td:first-child { background: var(--pink-tint); }
#wtab-budget .bg-table td.bg-supplier { white-space: normal; width: 470px; min-width: 470px; max-width: 470px; }
#wtab-budget .bg-table td.bg-supplier .bg-name { white-space: nowrap; }
#wtab-budget .bg-table td.bg-supplier .bg-forwhat {
display: inline-block; max-width: 150px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
#wtab-budget .bg-table tr.bg-cat .bg-cat-in { display: inline-block; position: sticky; left: 10px; }
#wtab-suppliers .sup-table .sup-c-role {
position: sticky; left: 0; z-index: 2; background: var(--surface, #fff);
width: 170px; min-width: 170px; max-width: 170px;
}
#wtab-suppliers .sup-table .sup-c-name {
position: sticky; left: 170px; z-index: 2; background: var(--surface, #fff);
width: 220px; min-width: 220px; max-width: 220px;
box-shadow: 6px 0 6px -6px rgba(80, 30, 60, .3);
}
}
/* 18 Oct, later — Gee: "it doesn't look like you did the freeze… on the
left-hand side." The freeze above only switched on at 1181px and wider,
and it was marked by a faint shadow alone. Her screen could not be read
(her tab did not answer), so both causes are covered:
- FROM 761px UP, with the frozen width shrinking on a smaller screen
(a 470px column would eat a laptop), so any screen that scrolls sideways
keeps the names;
- A SOLID PINK EDGE down the frozen column, so it reads as frozen at a
glance, like the line Excel draws under Freeze Panes. */
@media (min-width: 761px) {
#wtab-budget .bg-table thead th:first-child,
#wtab-budget .bg-table td.bg-supplier,
#wtab-budget .bg-table tr.bg-subtotal > td:first-child,
#wtab-suppliers .sup-table .sup-c-role,
#wtab-suppliers .sup-table .sup-c-name {
position: sticky; z-index: 2; background: var(--surface, #fff);
}
#wtab-budget .bg-table thead th:first-child,
#wtab-budget .bg-table td.bg-supplier,
#wtab-budget .bg-table tr.bg-subtotal > td:first-child,
#wtab-suppliers .sup-table .sup-c-role { left: 0; }
#wtab-budget .bg-table tr.bg-subtotal > td:first-child { background: var(--pink-tint); }
#wtab-budget .bg-table thead th:first-child,
#wtab-budget .bg-table td.bg-supplier,
#wtab-budget .bg-table tr.bg-subtotal > td:first-child,
#wtab-suppliers .sup-table .sup-c-name {
/* 19 Oct — Gee: "the pink is a bit overpowering… the line should be a
different color". SKY, her pick from three drawn on Tiffany's pages
(sky · mint · lavender). Mint ran into the green stage chips. The
budget's pink total rows were left pink, as she said. CHECK 202. */
box-shadow: inset -3px 0 0 var(--v-sky, #0091ea), 6px 0 8px -6px rgba(80, 30, 60, .35);
}
#wtab-budget .bg-table td.bg-supplier,
#wtab-budget .bg-table thead th:first-child {
white-space: normal; width: min(470px, 34vw); min-width: min(470px, 34vw); max-width: min(470px, 34vw);
}
#wtab-budget .bg-table td.bg-supplier .bg-name { white-space: nowrap; }
#wtab-budget .bg-table td.bg-supplier .bg-forwhat {
display: inline-block; max-width: 150px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
#wtab-budget .bg-table tr.bg-cat .bg-cat-in { display: inline-block; position: sticky; left: 10px; }
#wtab-suppliers .sup-table .sup-c-role { width: 150px; min-width: 150px; max-width: 150px; }
#wtab-suppliers .sup-table .sup-c-name { left: 150px; width: 200px; min-width: 200px; max-width: 200px; }
}
@media (min-width: 1181px) {
#wtab-suppliers .sup-table .sup-c-role { width: 170px; min-width: 170px; max-width: 170px; }
#wtab-suppliers .sup-table .sup-c-name { left: 170px; width: 220px; min-width: 220px; max-width: 220px; }
}
/* ---- The obvious how-to notes, gone — 18 Oct ------------------------------
Gee, on the supplier card: "Put their Instagram handle, put their
website… All of that muffle stuff doesn't really have to be there… I know
that an email address needs to get added… That's just like children."
Swept every window (supplier, budget line, to-do, wedding, contact) for grey
notes that are ALWAYS on show: five were how-to sentences. Two were deleted
from index.html, the hours one from suppliers.js; these two are written by
suppliers.js on every open, so they are switched off here rather than torn
out of code that still sets them.
KEPT: lines that say something about THIS row — "On the supplier team.",
"Nothing filed against this supplier yet.", "… has no bank details saved
yet…", "Confirmed 12 Oct…". Notes already folded behind a ? are untouched.
NOT TOUCHED: Key details' note ("Every place this wedding touches…") — it is
the run sheet's window and she said leave the run sheet alone. */
#s-location-hint,
#s-solo-note,
#s-coverage-confirmed:empty { display: none !important; }
/* §124.9 — the second sweep, her yes to "the 21": every page and window, and
the empty "new" version of each window. Switched off here (still written by
code): the supplier arrival and coverage how-tos, and the 11 Settings
section intros. Backup's intro is kept on purpose (#set-backup-intro: "no
undo" is a warning). The rest were taken out of the code itself:
suppliers.js (one-crew line, "usually filled in the day before"),
checklists.js (due-date note, "star the few things…"), budget.js ("No
supplier linked…"), activity.js ("Changes will show up here…"),
weddingfiles.js (the Files paragraph), index.html (Client portal intro).
LEFT ON HER SAY ("your call"): the findings group lines, the on-hold
reason note, Backup's warning, the long findings explanations. */
#s-arrival-hint,
#s-coverage-hint,
#module-settings .set-intro { display: none !important; }
#b-bank-hint:empty,
#s-driver-note:empty { display: none; }
/* ---- Findings cards: "Not now" beside the card, not under it — 18 Oct -----
Gee: "We don't need that much gap on the bottom next to the 'not now'."
Every card spent a whole line on a full-width Not now bar. Now it sits on
the right of the card's first line. Measured on Oguzhan & Amal: Overview
cards 95 → 60px (list 1,685 → 1,164); the Budget box 1,510 → 1,270.
🛑 NOT THE RUN SHEET'S BOX (#checks-timeline) — she asked for the run sheet
to be left alone. Same cards, same words, same menu. */
@media (min-width: 761px) {
#checks .check {
grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; row-gap: 4px;
}
#checks .check > .check-body { grid-column: 1; grid-row: 1; }
#checks .check > .check-later { grid-column: 2; grid-row: 1; width: auto; justify-self: end; position: relative; }
#checks .check > .check-goto { grid-column: 3; grid-row: 1; }
:is(#checks-budget, #checks-checklist, #checks-suppliers) .rsr-card:has(> .check-later) {
display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
padding-top: 8px; padding-bottom: 8px; row-gap: 2px;
}
:is(#checks-budget, #checks-checklist, #checks-suppliers) .rsr-card > .rsr-line,
:is(#checks-budget, #checks-checklist, #checks-suppliers) .rsr-card > .rsr-body { grid-column: 1; }
:is(#checks-budget, #checks-checklist, #checks-suppliers) .rsr-card > .check-later {
grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0; position: relative;
}
:is(#checks, #checks-budget, #checks-checklist, #checks-suppliers) .check-later > summary { width: auto; white-space: nowrap; }
:is(#checks, #checks-budget, #checks-checklist, #checks-suppliers) .check-later > .check-later-menu { right: 0; left: auto; }
}
/* ---- The to-do window, in panels — 18 Oct --------------------------------
Gee: "That's a mess… terrible layout." Mocked up live, then "just fix
everything". 1,320 → 1,060px wide; six panels (wrappers in index.html):
The to-do · Who and when · Notes · Email to send · Task style · With the
couple. Every hint and ? kept. Where a panel's first field already has its
own heading (Notes, Email to send, Task style — the last two carry a ?),
that heading IS the tab, as on the supplier card.
⚠️ A panel whose fields are all hidden hides itself: the email, style,
suggestions, answer and comments boxes are each hidden until needed. */
#task-modal .modal-box.full { width: 1060px; max-width: calc(100vw - 40px); }
#task-modal .modal-body > .form-grid { gap: 20px 14px; padding-top: 10px; }
#task-modal .tk-panel {
--sec: var(--v-sky); --sec-tint: var(--c-sky-tint);
grid-column: 1 / -1; position: relative; margin: 0;
padding: 14px 14px 10px; border-radius: 16px;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; min-width: 0;
}
#task-modal .tk-panel:not(.field):not(:has(> .field:not([hidden]))) { display: none; }
#task-modal .tk-panel::before,
#task-modal .tk-notes > .field > label:first-child,
#task-modal .tk-email > label:first-child,
#task-modal .tk-look > #t-style-wrap > label:first-child {
position: absolute; top: -11px; left: 14px; margin: 0; z-index: 1;
padding: 1px 10px; border-radius: 999px; line-height: 1.4;
background: var(--sec-tint);
border: 2px solid color-mix(in srgb, var(--sec) 20%, transparent);
color: var(--sec); font-weight: 800; font-size: .78rem;
letter-spacing: .08em; text-transform: uppercase;
}
#task-modal .tk-panel::before { content: attr(data-name); }
#task-modal .tk-notes::before,
#task-modal .tk-email::before,
#task-modal .tk-look:has(> #t-style-wrap:not([hidden]))::before { content: none; }
#task-modal .tk-look::before { content: "Suggestions"; }
#task-modal .tk-when { --sec: var(--v-magenta); --sec-tint: var(--pink-tint); }
#task-modal .tk-notes { --sec: #00a68f; --sec-tint: var(--c-teal-tint); }
#task-modal .tk-email { --sec: var(--v-grape); --sec-tint: var(--c-indigo-tint); }
#task-modal .tk-look { --sec: #7a5af8; --sec-tint: #f1edff; align-items: center; }
#task-modal .tk-couple { --sec: #e8590c; --sec-tint: #fff1e6; }
#task-modal .tk-panel .field { margin: 0; }
#task-modal .tk-panel > .field.full { flex: 1 1 100%; }
#task-modal .tk-look > .field.full { flex: 0 1 auto; }
#task-modal .tk-panel label:not(.check-inline) { color: var(--sec); font-weight: 700; }
#task-modal .tk-panel input:not([type="checkbox"]):not([type="file"]),
#task-modal .tk-panel select,
#task-modal .tk-panel textarea {
background: #fff;
border-color: color-mix(in srgb, var(--sec) 40%, transparent);
}
/* Email to send: To and Subject side by side. */
#task-modal .tk-email.field { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
#task-modal .tk-email > :not(input) { grid-column: 1 / -1; }
@media (min-width: 900px) {
#task-modal .tk-todo > .field:nth-of-type(2) { width: 300px; }
#task-modal .tk-todo > .field:nth-of-type(3) { width: 340px; }
#task-modal .tk-todo > .field:nth-of-type(4) { width: 180px; }
/* 21 Oct: the names take the line, the date sits small at the end of it. */
#task-modal .tk-when > .field:nth-of-type(1) { flex: 1 1 520px; min-width: 0; }
#task-modal .tk-when > .tk-due { flex: 0 0 auto; }
}
/* ---- Who and when, tidied — 21 Oct ----------------------------------------
Gee: "This layout's a bit stupid… The 'Type a name' and 'Enter' can be
smaller… the due date can be smaller and a bit more in alignment."
One line: the names (a lit button = on the to-do), a chip only for a name
with no button, then a small type box. The date is the same height as the
names, so the two read as one row. "For the couple" (Remind couple ·
Recommend suppliers · Add saved link) moved up here out of Task style.
CHECK 216. */
#task-modal .who-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
#task-modal .who-line > .chips:empty { display: none; }
#task-modal .who-line > .chips { margin: 0; }
#task-modal .who-line > .quick-names { display: contents; }
#task-modal .who-line > #t-assignee {
width: 160px; flex: 0 0 160px; margin: 0;
padding: 3px 10px; height: 28px; min-height: 0; font-size: .8rem; border-radius: 20px;
}
/* margin-top: measured 21 Oct, the date's top sat 6px above the names'
(the "Assigned to ?" label is taller than "Due date"). */
#task-modal .tk-due > #t-due {
width: 140px; height: 28px; min-height: 0; padding: 2px 8px; font-size: .82rem; margin-top: 6px;
}
#task-modal .tk-for-couple {
border-top: 1px dashed color-mix(in srgb, var(--sec) 35%, transparent);
padding-top: 10px;
}
#task-modal .tk-for-couple > label { display: block; margin-bottom: 6px; }
#task-modal .tk-for-couple .rcm-box { margin: 0; }
@media (max-width: 899px) {
#task-modal .tk-panel > .field { flex: 1 1 100%; }
#task-modal .tk-email.field { grid-template-columns: 1fr; }
}
/* ---- Weddings list, smaller — 18 Oct --------------------------------------
Gee: "a bit too big, and it's a bit hard to scroll through… I don't care
about the 'how many tasks to do'… I've never even looked at that."
Measured: cards 249px, three across, page 2,464px. Now four across, no task
count or progress bar, no "In progress" pill (every live wedding says it);
date, venue, countdown and the red "overdue" chip stay. ~1,364px.
And "Arrived by email" is one quiet line while nothing is waiting
(.is-quiet, set in inbox.js) — the red box comes back when something lands. */
@media (min-width: 1181px) {
#weddings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
#weddings-grid .wedding-card { padding: 14px 16px; }
#weddings-grid .wedding-card .card-name { padding: 9px 16px; margin: -14px -16px 8px; }
#weddings-grid .wedding-card .card-rows { margin-top: 0; gap: 3px; }
#weddings-grid .wedding-card .pill.status-booked,
#weddings-grid .wedding-card .card-progress .progress-bar,
#weddings-grid .wedding-card .card-progress-meta > span:not(.overdue-pill) { display: none; }
#weddings-grid .wedding-card .card-progress { margin: 0; padding: 0; min-height: 0; }
#weddings-grid .wedding-card .card-progress:not(:has(.overdue-pill)) { display: none; }
#invoice-inbox.is-quiet { padding: 8px 16px; margin-bottom: 16px; background: var(--surface, #fff); border-color: #f3c6d6; }
#invoice-inbox.is-quiet .inbox-head { margin: 0; }
#invoice-inbox.is-quiet .inbox-aside-toggle { display: none; }
#invoice-inbox.is-quiet .inbox-aside:has(> .inbox-aside-list[hidden]) { display: none; }
/* ---- Settings: "On this page" down the right — 18 Oct ---------------------
27,637px of Settings with nothing past the left two-thirds. The list is
drawn by drawSettingsNav() in settings.js; it stays in view as you scroll.
Wide screens only — on a narrow one it would push the settings down. */
#set-nav { display: none; }
@media (min-width: 1181px) {
#module-settings:has(> #set-nav) {
display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 40px; align-items: start;
}
#module-settings:has(> #set-nav)[hidden] { display: none; }
#module-settings > :not(#set-nav) { grid-column: 1; }
#set-nav {
grid-column: 2; grid-row: 1 / span 200; position: sticky; top: 16px;
display: grid; gap: 2px; padding: 14px; border-radius: 16px;
background: var(--pink-tint);
border: 2px solid color-mix(in srgb, var(--v-magenta) 20%, transparent);
}
#set-nav .sn-t { font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--v-magenta); margin-bottom: 4px; }
#set-nav button {
all: unset; cursor: pointer; color: var(--ink); padding: 4px 8px; border-radius: 8px; font-size: .9rem;
}
#set-nav button:hover { background: #fff; }
#set-nav button:focus-visible { outline: 2px solid var(--v-magenta); outline-offset: 1px; }
}
@media (max-width: 899px) {
#budget-modal .b-panel > .field, #budget-modal .b-p-pay .pay-way { flex: 1 1 100%; }
#budget-modal .money-row > .field { flex: 1 1 140px; }
}
/* Anything marked .full still spans the whole row — those are the fields that
genuinely need the width (notes, the roles grid, the payment schedule). */
.modal-box.full .field.full,
.modal-box.xwide .field.full { grid-column: 1 / -1; }
/* The payment schedule is the reason the budget box is wider — the extra
width is the whole fix. The scroller stays as overflow-x:auto: it shows a
bar only when the table genuinely does not fit, so on a wide window it is
invisible and on a laptop it still saves the layout. Forcing it visible
would push the entire page sideways on a narrow screen instead. */
@media (max-width: 780px) {
.modal-box.full { min-height: 0; }
.modal:has(> .modal-box.full) { padding: 5vh 16px; align-items: flex-start; }
.modal-box.full .modal-body { overflow-y: visible; padding: 22px; }
/* ⚠️ AND THE BOX HAS TO LET GO OF ITS HEIGHT, OR THE LINE ABOVE IS A
GUILLOTINE. This is the single worst bug the app has had.
Gee, 11 September, on an iPhone and a Samsung: "when I go to Key Run Sheet
Details, Getting Ready, Canapés Time, and Reception Time, I can't move
down. It doesn't give me the down option, so I can't view the full screen
on my phone… That's a huge issue and a huge bug."
Measured at 375×812 before this rule existed:
.modal-box max-height 779px · overflow hidden
content 1948px
1,168 pixels of the form — SIXTY PERCENT — simply unreachable. Not
scrolled off: clipped, with nothing to scroll.
The mobile plan was right and half-finished. Turning the BODY's scrolling
off is deliberate: the whole overlay is meant to scroll instead, which is
why the rule above sets `align-items: flex-start`. But the box still
carried `max-height: 96vh` and `overflow: hidden` from the DESKTOP rules,
where they are correct precisely because the body scrolls there. With the
body no longer scrolling, a cap on the box has nothing behind it.
⚠️ THE ID LIST IS NOT DECORATION. `max-height: 96vh` is set by
`#timeline-details-modal .modal-box.full` and friends — 1,2,0. A media
query adds no specificity, so a plain `.modal-box.full { max-height: none }`
LOSES to it and changes nothing. The same six ids have to be named again.
Proven at 375px before shipping: box height 1948 = full content, nothing
clipped, overlay scrollHeight 2029 against a 812 viewport. */
#wedding-modal .modal-box.full.snug,
#timeline-event-modal .modal-box.full.snug,
#contact-modal .modal-box.full,
#timeline-details-modal .modal-box.full,
#budget-modal .modal-box.full,
#supplier-modal .modal-box.full,
.modal-box.full {
max-height: none;
overflow-y: visible;
}
/* ---- AND SOMETHING TO GRAB ON ANYTHING THAT GOES SIDEWAYS ----------------
Gee: "Anything that goes across the page needs to have the arrow and the
line so I can move it."
A touch browser hides a scrollbar until you are already scrolling, which
is no use for telling you there is somewhere to scroll TO. On a phone
these get a permanent bar: the line is the affordance. `.table-scroll`
already fades its right edge; this is the other half. */
/* The bar itself — colour, thickness, always-visible on a phone — now lives
in ONE place for every screen size: "ONE MOVING LINE, EVERYWHERE" in
checks.css, soft plum, 27 September. It was grey here and teal on the top
bar, which is exactly the inconsistency Gee pointed at. */
}
.bg-summary {
display: flex;
align-items: center;
gap: 26px;
flex-wrap: wrap;
padding: 15px 18px;
margin-bottom: 18px;
border: 1px solid var(--line);
border-top: 3px solid var(--teal);
border-radius: var(--radius);
}
.bg-stat { display: flex; flex-direction: column; gap: 2px; }
.bg-stat .k {
color: var(--teal);
font-size: .67rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
}
.bg-stat .v { font-size: 1.05rem; font-weight: 600; }
.bg-stat.is-balance .v { color: var(--pink); }
.bg-stat-flag { margin-left: 4px; }
.bg-summary > .btn:last-child { margin-left: auto; }
.table-scroll { width: 100%; overflow-x: auto; }
.bg-table {
width: 100%;
border-collapse: collapse;
font-size: .87rem;
}
.bg-table thead th {
padding: 8px 10px;
border-bottom: 1px solid var(--line);
color: var(--teal);
font-size: .67rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
.bg-table td, .bg-table th { padding: 8px 10px; }
/* JUST SUPPLIERS. Gee, 7 Sept: "I don't want to remove the supplier type. I
want to have an option to press a button to just have the suppliers there...
category headings where we can then have them there or not have them there."
So it is a toggle, not a deletion — and it hides rather than rebuilds. The
rows are still written, still counted and still correct; they are simply not
drawn. That means pressing it twice cannot lose anything, and the totals it
is hiding are the same totals it shows again.
It rides on the existing "due date order" path, which already collapses the
whole budget into one band — so the only thing left to take away is the band
heading and its subtotal. Her reason for wanting it was "so we can see what
payment needs to be made", which is due order by definition. */
.bg-table.is-flat .bg-cat,
.bg-table.is-flat .bg-subtotal { display: none; }
/* ...and the category comes back ON THE ROW when the bands go, because with
the headings gone nothing else on the line says what a supplier is for.
Gee, 7 Sept: "we didn't want to get rid of the categories on the left-hand
side." Hidden in the grouped view, where the heading above already says it. */
.bg-cat-tag { display: none; }
.bg-table.is-flat .bg-cat-tag {
display: inline-block;
margin-right: 8px;
padding: 1px 8px;
border-radius: 999px;
background: var(--surface-soft);
color: var(--ink-soft);
font-size: .7rem;
font-weight: 600;
vertical-align: middle;
}
.bg-table .num { text-align: right; white-space: nowrap; }
.bg-table .strong { font-weight: 600; }
.bg-table tr.bg-cat th {
padding-top: 18px;
border-bottom: none;
color: var(--pink);
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.bg-table tbody tr[data-line] {
border-top: 1px solid var(--line);
cursor: pointer;
}
.bg-table tbody tr[data-line]:hover { background: #faf7f9; }
.bg-table tbody tr[data-line]:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }
/* A supplier's name is what she is looking for on this screen. 700, matching
the run sheet and the checklist, so a name reads the same weight wherever
she is. ⚠️ AND `.bg-table .bg-name` BELOW HAS TO MOVE TOO — it is more
specific and it is the rule that applies in the actual budget table, so
changing only this one would leave the main view untouched. */
.bg-name { font-weight: 700; }
/* ONE LINE, not three. Chosen from a rendered mock-up on 7 September.
This used to read `display: block`, with a comment saying that side by side
the button "kept getting squeezed onto its own line anyway". That was true
when the button sat in a narrow cell — but the supplier column is the widest
in the table, and stacking the name, the invoice button and the ⋮ made every
row two lines tall whether or not it needed to be. Down a twenty-line budget
that is most of a screen.
Gee, 7 Sept, on the budget: "where a row wraps onto two lines, I'd rather it
be one line." The row was never wrapping — it was stacking. The picture is
what settled it.
`white-space: nowrap` on the cell keeps the three parts together; the cell
is already the widest column and the table already scrolls sideways, so a
very long supplier name pushes the scroll rather than folding the row. */
/* ---------------------------------------------------------------------------
Ticking several budget lines to delete them together.
⚠️ `.bg-table tr.is-picked`, NOT a bare `.is-picked`. bloom.css:2180 already
owns `.cmp-flag.is-picked` for a comparison flag, and the two files are
loaded together — an unscoped rule here would reach into it. Same trap as
`.home-card`, which existed twice and let the later file win silently.
--------------------------------------------------------------------------- */
/* The run sheet's half of the same control. Deliberately the same shape as the
budget's: two screens doing one job differently is what has cost most here.
Scoped `.tl-row.is-picked` for the reason in the budget block below —
bloom.css already owns a bare `.cmp-flag.is-picked`. */
/* ---- find and replace on the run sheet ---------------------------------- */
.tl-find-where {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 8px 0 4px;
}
.tl-replace-list {
list-style: none;
margin: 10px 0 0;
padding: 0;
max-height: 46vh;
overflow-y: auto;
}
.tl-replace-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 4px;
border-bottom: 1px solid var(--line);
}
.tl-replace-list input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--pink);
flex: 0 0 auto;
}
.tl-replace-list .rp-field {
display: inline-block;
min-width: 46px;
font-size: .68rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Before above, after below — one under the other rather than side by side,
because a run sheet title can be sixty characters and two of them on one
line wrap into each other and stop being comparable. */
.tl-replace-list .rp-was,
.tl-replace-list .rp-now { display: block; font-size: .88rem; }
.tl-replace-list .rp-was { color: var(--ink-soft); text-decoration: line-through; }
.tl-replace-list .rp-now { color: var(--c-sage-deep, #0f6e56); }
.tl-replace-list li.is-risky .rp-now { color: #b3001b; }
.tl-replace-list .rp-why {
margin-left: auto;
flex: 0 0 auto;
align-self: center;
font-size: .7rem;
color: #b3001b;
background: #fdeaee;
border-radius: 999px;
padding: 2px 9px;
}
.tl-pick {
align-self: center;
/* ⚠️ NEGATIVE, because .tl-row is a flex row with `gap: 16px`. Left at 6px
the tick sat 22px from the controls beside it and read as belonging to
nothing. This pulls it back to 8px, which is the same air the budget's has
against its grip. */
margin-right: -8px;
accent-color: var(--pink);
cursor: pointer;
flex: 0 0 auto;
}
/* The picked tint itself lives at the BOTTOM of this file — see the note
there. Two hover rules would otherwise beat it on a tie. */
.tl-picked-bar {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 9px 14px;
border: 1px solid var(--pink);
border-radius: 10px;
background: var(--pink-tint);
}
.tl-picked-bar b { color: var(--pink-deep); font-size: .9rem; }
.tl-picked-del {
margin-left: auto;
border: 1px solid #b3001b;
background: #fff;
color: #b3001b;
font-weight: 700;
}
.tl-picked-del:hover { background: #b3001b; color: #fff; }
.bg-pick {
margin-right: 7px;
vertical-align: middle;
accent-color: var(--pink);
cursor: pointer;
}
/* On the heading band the tick sits against a tinted ground, so it needs the
same optical nudge the grip beside it gets. */
.bg-cat .bg-pick-cat { margin-right: 9px; }
/* The picked tint itself lives at the BOTTOM of this file — see the note
there. `.bg-table tbody tr[data-line]:hover td.bg-status` would otherwise
beat it on the status cell. */
/* Below the table, because she ticks her way DOWN it — see the note in
index.html. Sticky so a long strip-down does not leave the button off the
bottom of the screen at the exact moment she wants it. */
.bg-picked-bar {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 9px 14px;
border: 1px solid var(--pink);
border-radius: 10px;
background: var(--pink-tint);
}
.bg-picked-bar b { color: var(--pink-deep); font-size: .9rem; }
/* The destructive one carries the weight; Clear stays a ghost beside it. */
/* ⚠️ NOT `margin-left:auto` ANY MORE. Set aside sits between Clear and Delete,
so the auto margin moved onto the pair — otherwise Set aside would be pushed
right and Delete would sit beside it with no separation, and the gentle
option has to be the easier reach of the two. */
.bg-picked-aside {
margin-left: auto;
border: 1px solid var(--pink);
background: #fff;
color: var(--pink-deep);
font-weight: 600;
}
.bg-picked-aside:hover { background: var(--pink); color: #fff; }
/* 🛑 AN ACTION IN A SELECTION BAR THAT WORE NO TIER AT ALL, AND FOUR OF THEM
DID. Found 17 September by screenshotting the checklist's new bar: "Assign
to…" and "Due date…" rendered as bare text beside a pill, so the two things
she had just asked for looked like labels and Set aside looked like the only
button on the row.
⚠️ IT WAS NOT NEW. `#tl-picked-place` — the run sheet's "Set the place",
shipped the night before — had the same bare `btn btn-sm`, and so did the
BUDGET's "Set aside", which predates both. §41.2 is this exact fault one
component over: Open had no tier class while Delete was a red btn-danger, so
the destructive button was the loudest thing on the card.
⚠️ A SHARED CLASS, NOT A STRUCTURAL SELECTOR. `.bar .btn:not(.btn-ghost)…`
was the obvious way to write this and it would have been wrong: at five
classes' specificity it beats `.bg-picked-del` and `.tl-picked-del` at one,
and Delete selected would have turned pink. That is this morning's lesson —
the values agree and the cascade does not — so the rule names what it
styles. */
.picked-act {
border: 1px solid var(--pink);
background: #fff;
color: var(--pink-deep);
font-weight: 600;
}
.picked-act:hover { background: var(--pink); color: #fff; }
/* The payment labels for a whole selection (3 Oct). Outlined in the SAME
colour as the row's own filled label — blue Ready, magenta Deposit, red On
hold — so she recognises them, and filled only on hover so they never shout
louder than Delete. Paid is green, the colour of money that has gone. */
#bg-picked-bar, #bg-picked-bar-top { flex-wrap: wrap; }
/* The same bar ABOVE the table too (Gee, 20 Oct: "It'll be good to have one
on the top"). A clone made in initBudget. Not sticky — the bottom one
already follows her down the table, and two sticky bars would stack. */
.bg-picked-top { position: static; margin: 0 0 10px; }
.bg-bulk-pay { background: #fff; font-weight: 600; border: 1px solid currentColor; }
.bulk-ready { color: #1d4ed8; }
.bulk-deposit { color: #c026d3; }
.bulk-hold { color: #be123c; }
.bulk-cash { color: #f43f5e; }
.bulk-paid { color: #047857; }
.bg-bulk-pay:hover { color: #fff; }
.bulk-ready:hover { background: #1d4ed8; }
.bulk-deposit:hover { background: #c026d3; }
.bulk-hold:hover { background: #be123c; }
.bulk-cash:hover { background: #f43f5e; }
.bulk-paid:hover { background: #047857; }
/* Who sees it (22 Oct, CHECK 239): teal like the couple-facing chips, violet for hers. */
.bg-bulk-vis { background: #fff; font-weight: 600; border: 1px solid currentColor; }
.bulk-show { color: #00796b; }
.bulk-hide { color: #6d28d9; }
.bg-bulk-vis:hover { color: #fff; }
.bulk-show:hover { background: #00796b; }
.bulk-hide:hover { background: #6d28d9; }
/* The same four labels INSIDE the line's card (20 Oct). The one the line has
is filled, in the hover colour, so the card reads like the row's chip. */
.b-pay-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.bg-bulk-pay.is-on { color: #fff; }
.bulk-ready.is-on { background: #1d4ed8; }
.bulk-deposit.is-on { background: #c026d3; }
.bulk-hold.is-on { background: #be123c; }
.bulk-cash.is-on { background: #f43f5e; }
/* The Undo strip borrows the selection bar's look; mint, so it reads as
"done, and here is the way back" rather than as another selection. */
.bg-undo-bar { border-color: #10b981; background: #ecfdf5; }
.bg-undo-bar #bg-undo-text { color: #065f46; font-weight: 600; font-size: .9rem; }
.bg-picked-del {
border: 1px solid #b3001b;
background: #fff;
color: #b3001b;
font-weight: 700;
}
.bg-picked-del:hover { background: #b3001b; color: #fff; }
/* The drawer. Quiet by design — it is a note about what is not here, not a
control competing with the budget above it. */
/* ⚠️ STICKY, AND IT SHIPPED WITHOUT IT. The selection bar above is sticky and
this was not, so on a budget of forty lines "3 set aside · Show" sat at the
very bottom of the DOCUMENT — below every line and every subtotal — and Gee
set something aside and reported, correctly, "I can't see Show anywhere".
A way back that you have to go looking for is not a way back. It sits just
above the selection bar so the two stack rather than overlap. */
.bg-aside-bar {
position: sticky;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 8px 14px;
border: 1px dashed var(--ink-faint);
border-radius: 10px;
background: var(--surface, #fff);
font-size: .86rem;
color: var(--ink-soft);
}
/* Open, it is describing the screen you are looking at rather than one you
are not — so it stops being a footnote and says so. */
.bg-aside-bar.is-open {
border-style: solid;
border-color: var(--pink);
background: var(--pink-tint);
color: var(--pink-deep);
}
/* The run sheet's and the checklist's drawers are the budget's, by design —
three surfaces doing one job differently is what has cost this project most.
Kept in one block so they cannot drift apart. */
/* Sticky, for the reason in the budget's block above — a drawer you have to
scroll to the bottom of a sixty-line run sheet to find is not a way back. */
.tl-aside-bar,
.task-aside-bar {
position: sticky;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 8px 14px;
border: 1px dashed var(--ink-faint);
border-radius: 10px;
background: var(--surface, #fff);
font-size: .86rem;
color: var(--ink-soft);
}
.tl-aside-bar.is-open,
.task-aside-bar.is-open {
border-style: solid;
border-color: var(--pink);
background: var(--pink-tint);
color: var(--pink-deep);
}
/* ---------------------------------------------------------------------------
THE COUNT, IN THE TOOLBAR. 13 September.
Gee asked where "Show" was TWICE. By §39.18's own rule that means the control
is not findable, and the answer written down that day was to put the count
beside Print and Export — where she actually looks. This is that.
⚠️ MINT, MATCHING A QUESTIONNAIRE-PARKED ROW, AND NOT PINK. Pink on these
three tabs means SELECTION — the checkbox, the selection bar, "Set aside 3".
A pink chip in the toolbar would read as "3 rows are selected", which is a
different fact and the one thing this must not be confused with.
It is `hidden` when nothing is parked, so a wedding that has never used set
aside carries no permanent chip — the same rule the Imported badge follows.
--------------------------------------------------------------------------- */
.aside-chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: inherit;
font-size: .8rem;
font-weight: 700;
color: var(--c-teal);
background: var(--c-teal-tint);
border: 1px solid var(--c-teal);
border-radius: 9px;
padding: 4px 10px;
cursor: pointer;
}
.aside-chip:hover { background: var(--c-teal); color: #fff; }
.aside-chip:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
/* Open, it is the way BACK, so it stops being a quiet marker and becomes the
active control — the same flip the drawer bar does with .is-open. */
.aside-chip.is-open { background: var(--c-teal); color: #fff; }
.tl-picked-aside {
margin-left: auto;
border: 1px solid var(--pink);
background: #fff;
color: var(--pink-deep);
font-weight: 600;
}
.tl-picked-aside:hover { background: var(--pink); color: #fff; }
/* `margin-left:auto` moved onto Set aside above, so Delete sits beside it. */
.tl-picked-del { margin-left: 0; }
/* ---------------------------------------------------------------------------
WHY A ROW IS PARKED — one pill, three tabs.
The budget has had this since 106. The run sheet and the checklist WROTE the
reason and never showed it, so a parked line in either drawer looked exactly
like a live one and said nothing about why it was there. Gee found that on
13 September by looking at Aisle Planner's "Pre-Assignment: add note" and
asking for the same thing here.
⚠️ ONE RULE, THREE SELECTORS, DELIBERATELY. Copying the declarations into a
.tl- and a .task- block is how the couple's phase headings drifted away from
the planner's — see the warning at bloom.css:770. If this changes, it changes
for all three at once because there is only one of it.
The run sheet's and the checklist's wrap; the budget's does not, because a
budget row is a table cell and a wrapping pill there pushes the columns.
--------------------------------------------------------------------------- */
.bg-aside-why,
.tl-aside-why,
.task-aside-why {
margin-left: 8px;
font-size: .72rem;
color: var(--ink-soft);
background: var(--line-soft);
border-radius: 999px;
padding: 2px 9px;
white-space: nowrap;
}
/* When a task was ticked. Same pill as the parked reason above it — one shape
for "here is a fact about this row's state", rather than a second look to
learn. Quieter, because a done row is already dimmed and this must not be
the loudest thing on it.
Gee, 20 September: "I can't see what has been ticked… so then I can be like,
oh shit, they shouldn't have been ticked." `completed_at` was on the table
all along with nothing showing it. */
.task-ticked {
margin-left: 8px;
font-size: .7rem;
color: var(--ink-faint);
background: var(--line-soft);
border-radius: 999px;
padding: 2px 9px;
white-space: nowrap;
display: inline-block;
}
/* Nothing on paper needs to know when it was ticked. */
@media print { .task-ticked { display: none; } }
/* WHAT A LINE IS ACTUALLY FOR, when the supplier's name is not the answer.
15 September — three Ritz-Carlton rows at $500, $2,000 and $1,710 with no
way to tell them apart, while "Confetti clean-up fee" sat in a field nothing
drew.
⚠️ NOT `white-space: nowrap`, unlike its neighbour above. A set-aside reason
is a few words; "Security — 3 guards, minimum 6 hours each at $95/hour as per
RSA" is a sentence, and holding it on one line would push the money columns
off the side of the table. It wraps and the row grows, which is the right way
round. */
.bg-forwhat {
margin-left: 8px;
font-size: .74rem;
color: var(--ink-soft);
font-style: italic;
}
.bg-forwhat::before { content: "· "; font-style: normal; opacity: .6; }
.tl-aside-why,
.task-aside-why {
display: inline-block;
margin: 5px 0 0;
white-space: normal;
}
/* ---------------------------------------------------------------------------
"THEY SAID NO" AGAINST "I DECIDED THIS". 13 September.
Gee: "can it go in the backgrounds, with the highlight being green or
something? Then it says from VIP questionnaire."
⚠️ THE MINT IS ONLY ON THE QUESTIONNAIRE'S ROWS, AND THAT IS THE WHOLE
POINT. Drawn four ways first. Tinting every parked row green was the literal
request and the drawing killed it: parked rows appear ONLY inside the drawer,
where everything is parked, so a tint on all of them says nothing — and a row
SHE parked would have carried a label claiming the couple said no.
⚠️ MINT (--c-teal), NOT EMERALD (--c-sage). Emerald is done-and-paid
everywhere else in this file, and `band-sage` is a heading band that can sit
directly above a parked line. Measured before choosing, not guessed.
--------------------------------------------------------------------------- */
.tl-row.is-aside .tl-title,
.task-row.is-aside .task-title {
text-decoration: line-through;
text-decoration-color: var(--ink-faint);
color: var(--ink-soft);
}
.tl-row.is-aside.from-vip,
.task-row.is-aside.from-vip {
background: var(--c-teal-tint);
border-left: 3px solid var(--c-teal);
padding-left: 9px;
}
.tl-row.is-aside.from-vip .tl-aside-why,
.task-row.is-aside.from-vip .task-aside-why {
color: var(--c-teal);
background: var(--surface);
font-weight: 600;
}
/* The tint has to survive a hover, or the row flickers between two meanings
as the mouse crosses it. `.tl-row:hover` is a bare colour further up. */
.tl-row.is-aside.from-vip:hover,
.task-row.is-aside.from-vip:hover { background: var(--c-teal-tint); }
.bg-supplier { white-space: nowrap; }
.bg-supplier .bg-name { display: inline; margin-right: 8px; }
.bg-supplier .bg-clip,
.bg-supplier .row-dots,
.bg-supplier .bg-talk { vertical-align: middle; }
/* Invoices, quotes and receipts on a budget line.
A bare paperclip glyph was far too easy to miss, so this is a labelled
button that says what it does whether or not anything is attached yet. */
.bg-clip {
display: inline-block;
margin-top: 0;
padding: 2px 9px;
border: 1px solid var(--teal);
border-radius: 999px;
background: var(--surface);
color: var(--teal-deep);
font-family: inherit;
font-size: .72rem;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
cursor: pointer;
}
.bg-clip:hover { background: var(--teal-tint); }
.bg-clip.has-files {
border-color: var(--teal);
background: var(--teal-tint);
}
/* A second line under the status pill: which instalment is actually paid. */
.status-detail {
display: block;
margin-top: 3px;
color: var(--ink-faint);
font-size: .68rem;
line-height: 1.3;
}
.bg-flag {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
border-radius: 999px;
background: var(--danger-tint);
color: var(--danger);
font-size: .68rem;
font-weight: 600;
}
.bg-table tr.bg-subtotal td {
border-top: 1px solid var(--line);
color: var(--ink-soft);
font-weight: 600;
}
.bg-table .is-overdue { color: var(--danger); font-weight: 600; }
/* The three supporting figures under the balance on a supplier row.
Deliberately quiet: the balance is the one that means "do something", and
four numbers of equal weight is four numbers nobody reads. */
.sup-money-detail {
display: block;
margin-top: 2px;
color: var(--ink-faint);
font-size: .72rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* "not in budget" was a dead label; it is a door now. Sized like the other
row buttons so it reads as something to press. */
.sup-add-budget { white-space: nowrap; }
.status {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
}
.status-paid { background: var(--teal-tint); color: var(--teal-deep); }
.status-partial { background: var(--pink-tint); color: var(--pink); }
.status-unpaid { background: #f2f0f1; color: var(--ink-soft); }
/* ---------- payment schedule ---------------------------------------------- */
.form-section {
margin: 22px 0 4px;
padding-top: 16px;
border-top: 1px solid var(--line);
color: var(--pink);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}
.pay-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pay-table thead th {
padding: 6px 6px;
color: var(--teal);
font-size: .64rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
.pay-table td { padding: 4px 6px; vertical-align: middle; }
.pay-table .pay-seq { color: var(--ink-faint); white-space: nowrap; }
.pay-table .pay-tick { text-align: center; }
.pay-table .pay-tick input { width: 16px; height: 16px; accent-color: var(--teal); }
.pay-in { padding: 6px 8px; font-size: .84rem; }
.pay-table .pay-del { width: 34px; }
/* 🛑 SCOPED TO `.pay-table` ON 18 SEPTEMBER, AND THE SCOPE IS THE WHOLE FIX.
`pay-none` MEANS TWO DIFFERENT THINGS in this app and this rule was written
for only one of them:
in `.pay-table` — the empty row, "No payments scheduled yet" (budget.js
3160). Grey is right: there is nothing there.
on `.bg-table tr` — the payment STATUS "Unpaid" (budget.js 532). A real
supplier, a real amount, real money owed.
Unscoped, this selector (0,1,1) caught both, so every unpaid budget row —
the supplier's NAME included — rendered at `--ink-faint`, rgb(160,148,154),
which is 2.92:1 on white and under the 4.5:1 a word needs.
Gee found it on Legato and was right twice over: "a lot of people don't get
a payment until the wedding day, so I don't think they should be grayed out."
Unpaid is normal, not a lesser state — the status pill and the coloured left
edge already say it. Measured the day it was fixed: 3 of Tiffany's 18 rows,
21 of Solin & Rony's 28, and 33 of Pardesay & Haries' 35. A wedding uploaded
with nothing paid yet would have drawn its ENTIRE budget at 2.92:1 on day one.
⚠️ The padding was already being overridden by a later rule on the budget
table — measured identical (12px 12px 12px 8px) across pay-none, pay-part
and pay-done before touching this — so scoping changes the COLOUR and
nothing else. See `a-shorthand-wipes-the-longhand` and
`css-class-name-collisions` in memory: one name, two meanings. */
.pay-table .pay-none td { padding: 12px 6px; color: var(--ink-faint); }
/* 📎 Receipt beside Paid, and the green bar after a couple ticks (Gee's
mock-up, 15 Oct; migration 147). The tick cell stops wrapping so the
button sits on the tick's line. */
.pay-table .pay-tick { white-space: nowrap; }
.pay-table .pay-receipt { margin-left: 8px; }
.pay-table .pay-receipt-remove { margin-left: 2px; padding: 2px 8px; color: var(--danger); font-weight: 800; }
.pay-ticked-row td { padding: 4px 6px 8px; }
.pay-ticked {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
background: var(--ok-tint); border-radius: 10px; padding: 10px 14px;
font-size: .86rem;
}
.pay-ticked b { color: var(--ok); }
.pay-ticked-hint { color: var(--ink-faint); font-size: .78rem; }
.pay-ticked-email { font-weight: 700; user-select: all; }
.pay-gee-paid {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: var(--ok-tint); color: var(--ok); font-weight: 700; font-size: .78rem;
}
.pay-warn td {
padding: 2px 6px 8px;
color: var(--danger);
font-size: .76rem;
}
.pay-foot {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 12px;
}
.pay-summary { color: var(--ink-soft); font-size: .82rem; }
.pay-mismatch { color: var(--danger); font-weight: 600; }
/* ⚠️ THE `gap` LINE THAT WAS HERE HAS MOVED, 18 September. A later plain
`.bg-summary { gap: 34px }` beat it — same weight, further down — so the
summary strip kept a 34px gap on a phone while this said 16. It now sits
directly under that rule. The button line below never collided and stays. */
@media (max-width: 620px) {
.bg-summary > .btn:last-child { margin-left: 0; width: 100%; }
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 9px 18px;
margin-top: 10px;
}
.feature-grid .check-inline {
text-transform: none;
letter-spacing: 0;
font-size: .87rem;
color: var(--ink);
}
.subnav-item[hidden] { display: none !important; }
.bg-table .is-under { color: var(--teal-deep); }
.bg-table .is-over { color: var(--danger); font-weight: 600; }
/* ---------- timeline ------------------------------------------------------ */
/* Key details wears a filled teal bar and owns the top of the sheet.
Gee, 27 Aug: "this key details section is not powerful enough... the
supplier arrival times are more prominent than that, and I want that to
really stand out. That really dictates everything that's happening on the
day." It was the faintest thing on the page and the most important. */
.tl-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 0;
padding: 9px 16px;
background: var(--teal-deep);
border-radius: var(--radius) var(--radius) 0 0;
}
/* Gee, 28 Aug: "the key details heading and the supply arrival times heading
must be larger." They label the two blocks that dictate the day and they
were set smaller than the body text under them. */
.tl-header h3 {
margin: 0;
color: #fff;
font-size: .95rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* On the bar, not below it — a ghost button in ink would vanish into teal. */
.tl-header .btn-ghost {
color: #fff;
border-color: rgba(255, 255, 255, .45);
}
.tl-header .btn-ghost:hover {
background: rgba(255, 255, 255, .16);
border-color: #fff;
color: #fff;
}
.tl-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px 22px;
padding: 16px 17px;
border: 1.5px solid var(--teal-deep);
border-top: 0;
border-radius: 0 0 var(--radius) var(--radius);
}
.tl-detail { display: flex; flex-direction: column; gap: 3px; }
/* Bold, and the deep teal rather than the light one. The pale --teal on a
white card was the "too faint" Gee was pointing at. */
/* 🛑 800. Gee, 17 September, pointing at exactly these: "the stuff that's in
the green, the teal colour — the bride's getting-ready location wording, the
bride's address wording, the groom's getting-ready location wording. That's
what I wanted you to go in bold."
⚠️ THEY WERE ALREADY 700, WHICH IS WHY MY FIRST ATTEMPT WENT TO THE WRONG
HALF OF THE PANEL. Measuring said the labels were bold and the VALUES were
600, so I bolded the values — and she had to send the panel back twice to
say I had the wrong thing. The measurement was right and the inference from
it was wrong: "already 700" is not "already as bold as it can look", and at
10.85px in uppercase with letter-spacing, 700 reads light.
Figtree loads 800, so that is where these go. If it still is not enough the
next lever is SIZE or COLOUR — there is nothing above 800. */
/* 🛑 AND WHEN 800 STILL READ LIGHT, THE ANSWER WAS NOT MORE WEIGHT.
Gee, after the third attempt: "The teal still reads light. It's still not
bolded."
800 is the heaviest Figtree loads, so weight was exhausted. Three other
things were making these read thin, and all three are fixed here:
SIZE .7rem ≈ 11px. Small type reads light at ANY weight. → .8rem
CONTRAST #007c85 on white is about 4.6:1 — a mid teal that greys out
at small sizes. → #00565e ≈ 7.8:1
LETTER-SPACE .06em on uppercase pulls the strokes apart, which is exactly
what "not bold" looks like. → .035em
⚠️ THE COLOUR IS SET HERE, NOT ON `--teal-deep`. That token is used across
the app and darkening it would silently restyle every other teal thing to fix
one panel. */
.tl-detail .k {
color: #00565e;
font-size: .8rem;
font-weight: 800;
letter-spacing: .035em;
text-transform: uppercase;
}
/* 🛑 THE ANSWER, NOT THE QUESTION. Gee, 17 September, pointing at Key details:
"I want them bolded on the screen too."
⚠️ MEASURED BEFORE CHANGING ANYTHING, AND IT WAS NOT WHAT THE WORDS SAID.
The teal labels — BRIDE GETTING READY LOCATION, VENUE BUMP-IN — were
ALREADY 700. What read as unbolded was this: the values beneath them, at
600. She was pointing at the panel; the only thing in it that was not bold
was the half that carries the facts.
BRIDE GETTING READY LOCATION 10.85px 700 ← already bold
Bride's home 15.0px 600 ← this one
700 puts it with the run sheet line, the checklist task, the budget name and
the supplier name. The label stays where it is: it is small teal capitals and
it is the caption, not the content. */
/* ⚠️ 600, AND IT IS BACK AT 600 ON PURPOSE. It was briefly taken to 700 and
then 800 chasing "I want them bolded" — wrong half of the panel. Gee meant
the teal labels above; she asked for this reverted. The value is the answer
and it sits at 600 under a heavier label, which is the hierarchy she wants.
Do not "restore" this to 700 to match the other list screens: those are
NAMES in a list, this is a value under its own caption. */
.tl-detail .v {
font-size: .97rem;
font-weight: 600;
word-break: break-word;
}
/* AN ABSENCE SHE HAS CONFIRMED — "Ceremony: None on the wedding day",
"Canapés: None", "Bridal party: None".
Gee, 10 Sept, looking at the three of them scattered through the card in the
same teal as a real address: "I think it should be in red."
Both halves go red, not just the value. The teal label column is a strong
rhythm down the card and a red value under a teal label reads as one cell
half-changed; the whole cell turning is what makes it a different KIND of
statement rather than an odd-looking fact.
⚠️ Red means "wrong" elsewhere in this app — overdue, TBC, cancelled. Here
it deliberately means "there isn't one", and it is Gee's call: a supplier
glancing at a run sheet should not be able to miss that there is no
ceremony. Raised with her before building.
⚠️ IT WAS --danger (#b3001b) FIRST, AND THAT WAS WRONG. Gee, looking at it
live: "It's a red that you can't really see properly... I want a big,
vibrant red so people can easily distinguish it." She was right — #b3001b is
a dark maroon chosen to sit QUIETLY beside body text as an overdue stamp,
which is the opposite job. Against a white card at .97rem it reads as brown.
--absent is #d50000, the same vibrant red the palette already keeps as
--btn-crimson. Given its own name rather than borrowing the button token,
because a button colour and a "this is not happening" colour are two
different jobs that only happen to agree today.
Weight 700 as well: "big AND vibrant" was two requests, and the value sits
at 600 like every other fact on the card.
⚠️ AND THE WEIGHT CAME BACK OFF, 11 September. Gee: "the NA next to ceremony
is a bigger font than the ones below… it doesn't have to be that big. I
think the NA doesn't have to be bolded."
The size never changed — .97rem, the same as every other value on the card.
700 against its 600 neighbours READ as bigger, which is the more useful bug
report: weight and size are the same signal at a glance, and "make it stand
out" was already being done by the colour. */
.tl-detail.is-none .k,
.tl-detail.is-none .v { color: var(--absent); }
/* How many lines read backwards, and the one button that fixes them. Sits
above the day rather than inside it: it is about the sheet, not a line. */
.tl-order {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 0 0 12px;
padding: 11px 14px;
background: var(--danger-tint);
border: 1px solid var(--danger);
border-radius: var(--radius-sm);
}
.tl-order-say { margin: 0; font-size: .92rem; color: var(--danger); }
.tl-order-say b { font-weight: 700; }
.tl-order .btn { margin-left: auto; }
/* The question a moved line asks about its own time. Indented to the width of
the control gutter plus the time column, so it reads as belonging to the
line above it rather than as a row of its own. */
.tl-timefix {
list-style: none;
margin: 0 0 4px 86px;
padding: 12px 14px;
background: var(--surface-warm);
border: 1px solid var(--pink-deep);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.tl-timefix-say { margin: 0 0 9px; font-size: .9rem; color: var(--ink); }
.tl-timefix-do {
display: flex;
align-items: center;
gap: 9px;
flex-wrap: wrap;
font-size: .9rem;
}
/* ⚠️ NOT `input[type="time"]` — that selector matched for about a second.
initLooseTimeInputs() rewrites every time input to type="text" at boot, and
this block is built long after that, so the rule stopped applying the moment
the sweep touched it. Measured on the live build: the box went 122px → 764px
and the prompt became 235px tall across six lines.
This is `time-inputs-are-not-time-inputs` in the memory folder, and it has
now cost an AM/PM change and this. NEVER style these by type. */
.tl-timefix-do input {
width: 122px;
flex: 0 0 auto;
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font: inherit;
}
/* One line, not six. The label belongs to the box beside it, so they must not
be separated by a wrap. */
.tl-timefix-do label { flex: 0 0 auto; color: var(--ink-faint); }
.tl-timefix { padding: 10px 14px; }
.tl-timefix-say { margin-bottom: 7px; }
.tl-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.tl-row {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 11px 10px;
border-bottom: 1px solid var(--line);
}
.tl-row:hover { background: #faf7f9; }
/* Black, not pink. Gee, 27 Aug: "there's just way too much pink happening on
this running sheet. I think the times are not in pink, but in black."
A time is data you read sixty times down a page, not an accent — and pink
on every one of them was what made the whole sheet look decorated. */
.tl-time {
flex: 0 0 86px;
padding-top: 1px;
color: var(--ink);
font-size: .87rem;
font-weight: 600;
white-space: nowrap;
}
/* Not greyed out. A time that isn't locked in is a job still to do, and the
faint grey read as "unimportant" — which is the opposite of true.
Highlighted as well as coloured, using the same idea as Gee's own marks on
the run sheet: on a page of fifty lines, red type alone still scans past.
A block of colour does not. */
.tl-row.is-tbd .tl-time {
color: #b3001b;
font-weight: 700;
}
/* The planner's time column wraps its text in a span so a highlight hugs the
time; the couple's copy puts the text straight in. Both need the block.
⚠️ NOT ON "Mark as checked". Since 13 Oct that button lives in this column
too, and `> *` painted it pale pink with its white words on top — Gee
spotted it on Annika & Ceyhun's Drinks + grazing line, 15 Oct; 13 lines on
5 live weddings. CHECK 167. */
.tl-row.is-tbd .tl-time > :not(.yellow-checked),
.tl-readonly .tl-row.is-tbd .tl-time {
background: #ffe0e3;
border-radius: 3px;
padding: 1px 5px;
}
.tl-readonly .tl-row.is-tbd .tl-time {
display: inline-block;
color: #b3001b;
font-weight: 700;
}
/* A column so the title, the supplier pill and the notes stay stacked while
each one only takes the width it needs. */
.tl-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* inline-block, not block: a highlighted title has to hug its words the way a
marker pen would, rather than painting the whole row yellow. */
/* 🛑 THE LINE IS THE THING SHE READS, AND IT WAS THE LIGHTEST TEXT ON THE ROW.
Gee, 17 September: "See how you've got 7:00 till 9:00? It's quite bolded,
but the makeup artist arrives at the bride's house — on the screen it's not
bolded. I need every line item site-wide to be bold... It's so hard to read,
see, and decipher."
Measured on her own row before changing anything, and she is right — it was
backwards:
7:00 - 9:00 am 13.5px, weight 600
Make-up artist arrives @ Bride's… 14.4px, weight 400
The bigger text carried the lighter weight, so the clock shouted and the
thing happening whispered. On a 69-line sheet that is the whole page.
⚠️ ONE RULE COVERS BOTH RUN SHEETS. `.tl-title` is written by timeline.js
AND portal.js, so the couple's copy changes with hers and there is no second
place to keep in step.
⚠️ AND `.is-quiet` STILL WINS. The arrivals card's hover-revealed label sets
`font-weight: 400` at two classes' specificity, so it beats this at one and
stays quiet — checked, not assumed. Headings are unaffected too: they set
700 at three classes and were already bold. */
.tl-title {
display: inline-block;
max-width: 100%;
font-size: .93rem;
font-weight: 700;
word-break: break-word;
}
.tl-notes {
display: block;
align-self: stretch;
margin-top: 3px;
color: var(--ink-soft);
font-size: .8rem;
line-height: 1.45;
}
/* .tl-actions is gone — every control for a line now lives in .tl-gutter on
the left beside the time, so nothing has to be reached for across the row. */
@media (max-width: 620px) {
.tl-time { flex-basis: 64px; }
}
/* ---------- timeline colours + responsible -------------------------------- */
/* Sits under the notes, not between them and the title — a supplier pill in
the middle of a block of notes reads like the notes have ended. */
/* 🛑 A FILLED CHIP, NOT TEAL TEXT IN A NEARLY-WHITE RING. 19 September.
Gee, looking at her own run sheet: *"there needs to be a different border
around the supplier name because at the moment it's teal on teal, and it is
very hard to distinguish."*
She was exactly right, and reading the three things side by side on one line
showed why:
Gucci Paints #007c85 text · border var(--line), near enough to white
+ supplier #007c85 text — THE SAME COLOUR
Bride's home tint + matching border — reads as a solid object
So the supplier's name was the only one of the three that was not a chip,
and it sat against a button of its own colour.
⚠️ THE PATTERN IS THE ONE BESIDE IT, NOT A NEW ONE. `.who-place.is-set` two
rules down is tint + matching border, and it has been the approved shape
since it shipped. This is that shape in the supplier colour.
`make-it-look-like-that-means-reuse-those-classes`.
⚠️ AND PRINT.CSS CARRIES THE SAME CHANGE. Gee: *"I thought it was all going
to be on the same"* — the screen and the paper have to agree, and the print
sheet had the identical pale ring. */
.tl-who {
display: inline-block;
margin-top: 6px;
padding: 1px 9px;
border: 1px solid var(--teal-deep);
border-radius: 999px;
background: var(--teal-tint);
color: var(--teal-deep);
font-size: .74rem;
font-weight: 600;
}
/* MORE THAN ONE ON A LINE, since migration 83. Gee, 3 Sept: "we should be able
to put multiple suppliers on one line if required as well."
A chip each rather than one tag holding a comma list — she chose this looking
at both, and it is right for a document that is scanned: three names run
together read as one long supplier name. */
/* The colour key under the run sheet. Quiet on purpose — it is a reference you
glance at once, not part of the day. `.c-*` already carry the six title
colours, so the dot cannot drift from the thing it explains: it takes its
background from the same class the title takes its text colour from. */
.tl-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
margin: 14px 2px 0;
padding-top: 11px;
border-top: 1px solid var(--line-soft, var(--line));
font-size: .78rem;
color: var(--ink-soft);
}
.tl-key-lead { font-weight: 600; color: var(--ink); }
.tl-key-item { display: inline-flex; align-items: center; gap: 6px; }
.tl-key-dot {
width: 11px; height: 11px; border-radius: 3px;
background: currentColor;
}
/* The meaning, which she types. Looks like text until you hover it, because it
is a label first and a control second. */
.tl-key-say {
padding: 1px 5px;
border: 1px solid transparent;
border-radius: 5px;
background: none;
color: var(--ink);
font-family: inherit;
font-size: inherit;
font-weight: 600;
cursor: text;
}
.tl-key-say:hover { border-color: var(--line); background: var(--surface); }
/* Not yet named: quieter, and italic so it reads as a prompt rather than as a
meaning somebody actually wrote. */
.tl-key-say.is-empty { color: var(--ink-faint); font-weight: 400; font-style: italic; }
.tl-key-input {
padding: 1px 6px;
border: 1px solid var(--teal);
border-radius: 5px;
font-family: inherit;
font-size: inherit;
min-width: 170px;
}
/* Paper gets the meanings and none of the machinery. */
@media print {
.tl-key-say { border: 0; background: none; padding: 0; }
.tl-key-say.is-empty { display: none; }
}
/* ⚠️ THE NAMES SIT ON ONE LINE.
`.tl-main` is a flex COLUMN, so before this every chip dropped onto a line of
its own — invisible with one supplier, three lines taller with three. Found
7 September by rendering a line with three names rather than by reading the
code. The row wraps only when it genuinely runs out of width. */
.who-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin-top: 6px;
max-width: 100%;
}
.who-line .tl-who { margin-top: 0; }
.who-line .tl-who + .tl-who { margin-left: 0; }
/* Tag a second supplier without opening the line. Dashed, so it reads as an
invitation rather than as another supplier already on the line. */
.who-add {
padding: 1px 9px;
border: 1px dashed var(--line);
border-radius: 999px;
background: none;
color: var(--teal-deep);
font-family: inherit;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
}
.who-add:hover { border-style: solid; background: var(--surface-soft); }
/* Say WHERE a line happens, next to who is on it. 12 September.
Gee, 7 Sept, about tagging a supplier: "you have to go into it to be able to
add. I'd rather it be up there." Then, 12 Sept, the identical complaint about
the venue: "Do I need to go into the card file to then allocate where it's
going? Is that right?" It was, and it should not have been.
⚠️ INDIGO, NOT TEAL. .who-add beside it is teal because teal means a person
throughout this app; a place is not a person. Indigo is what the section
bands already wear, which is where a place comes from when the line has none
of its own — so the two controls on one row cannot be mistaken for each
other at a glance.
A quiet link while empty, a filled pill once she has chosen: the coloured
tag on the far right looks identical whether the place was PICKED or guessed
from the wording, so this chip is the only thing on the row that can tell
her which. That is why it shows the venue name rather than a tick.
⚠️ SCOPED THROUGH .who-line, AND THAT IS NOT TIDINESS. `.tl-add-link` — the
class every one of these buttons also carries — sets `border: 0` and teal at
line 4664, nearly two thousand lines BELOW here. Same specificity (0,1,0),
so the later rule wins and a bare `.who-place` loses its colour and its
border silently. Found by asking the browser which rule won rather than by
re-reading the file, which is the rule in CLAUDE.md.
⚠️ AND `.who-add` ABOVE HAS THE SAME FAULT, UNFIXED ON PURPOSE. Its dashed
pill has never rendered — "+ supplier" has always been a plain teal text
link. That is a real bug and it is Gee's to decide about, not something to
change underneath her while she was asking for something else. Raised
12 September. If she wants the pill back, scope it the same way this is. */
.who-line .who-place {
color: var(--c-indigo);
font-weight: 600;
}
/* Set, it stops being a link and becomes a value — it carries a venue name,
not an instruction. The pill is what makes that read as a fact.
(0,3,0) here, so it clears .tl-add-link without needing !important.) */
.who-line .who-place.is-set {
padding: 1px 9px;
border: 1px solid var(--c-indigo);
border-radius: 999px;
background: var(--c-indigo-tint);
}
.who-line .who-place:hover { text-decoration: underline; }
/* On a phone it is drawn the same — it is one small control and there is
nothing to compact away, the same call made for .act-x on 31 August. */
.tl-who + .tl-who { margin-left: 5px; }
/* A TYPED NAME IS NOT A SUPPLIER, and must not look like one. Only a supplier
picked from Contacts is counted by "is this supplier on the run sheet", by
the coverage warning, or by their start time. Same shape, no fill, muted —
present on the sheet, honestly not the same thing. */
.tl-who.is-typed {
/* ⚠️ AND NO FILL, now that a picked supplier has one. 19 September: the fill
went on `.tl-who` and would have been inherited here, which would have
made a typed name look exactly like a counted one — the precise thing this
rule exists to prevent. */
background: none;
color: var(--ink-soft);
border-color: var(--line);
border-style: dashed;
font-weight: 500;
}
/* A typed name saying TBC / TBD — a supplier still to be found. Red, keeping
the round dashed box. Gee, 18 October: "I like the round box, but red
because it's a TBC." */
.tl-who.is-typed.is-tbc {
color: var(--danger);
border-color: var(--danger);
background: var(--danger-tint);
font-weight: 600;
}
/* ---- the picker in the Edit event modal ---- */
.who-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 7px;
}
.who-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px 3px 11px;
border: 1px solid var(--c-teal);
border-radius: 999px;
background: var(--c-teal-tint);
color: var(--c-teal);
font: inherit;
font-size: .78rem;
font-weight: 600;
cursor: pointer;
}
.who-chip span { font-size: .95rem; line-height: 1; opacity: .65; }
.who-chip:hover { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); }
.who-chip:hover span { opacity: 1; }
/* A supplier taken out of Contacts after the line was written. Shown, and
removable, rather than dropped silently — a name vanishing off a run sheet
the first time somebody opens the line is not a thing to do quietly. */
.who-chip.is-gone {
border-color: var(--line);
background: var(--surface-soft);
color: var(--ink-faint);
font-style: italic;
}
/* ---------- text colours and highlighter pens ------------------------------
These are deliberately plain, single-purpose classes. They sit on the time,
on the title, and on spans inside notes, so the same red means the same
thing wherever it appears on the run sheet. */
.c-red { color: #b3001b; } /* a proper red, not a warning-triangle orange */
.c-blue { color: #0067a3; }
.c-pink { color: var(--pink); }
.c-teal { color: var(--teal-deep); }
.c-amber { color: #d4121f; }
.c-green { color: #00733d; }
.c-black { color: var(--ink); }
/* The pens are deliberately NOT the status tints. Until 31 Aug 2026 yellow was
--warn-tint, green was --ok-tint and blue was --c-sky-tint, so a highlighted
word wore the same colour as "due soon" or "done and paid". These sit one
step more saturated than any tint, so a pen can never read as a status.
Yellow leads because no status in the app is yellow — it is the one hue the
pen owns outright. Grey is no longer offered in the picker (see HIGHLIGHTS
in timeline.js) but is kept here so notes that already use it still draw. */
.h-yellow { background: #ffe89c; }
/* Added 9 Sept — Gee: "most likely, I'll highlight yellow or orange."
Deliberately this side of orange rather than a strong one: on a black-and-
white print a saturated orange drops to the same grey as the yellow, and two
pens that print identically are one pen. */
.h-orange { background: #ffd0a1; }
.h-pink { background: #ffc6dd; }
.h-blue { background: #bcdcff; }
.h-green { background: #aeecc6; }
.h-grey { background: #e3dde1; }
/* The pen should look like a pen: it hugs the words, not the whole row. */
.h-yellow, .h-pink, .h-blue, .h-green, .h-grey {
padding: 0 3px;
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* ⚠️ 800, NOT 700, AND THAT IS BECAUSE THE BASE MOVED. Every line title is 700
now, so a 700 here would have silently turned her per-line Bold button into a
control that does nothing — nine lines across her weddings use it, three of
them on Tiffany & Liam. Figtree ships 800, so the emphasis survives.
A toggle that stops changing anything is worse than one that was never
built: she presses it, nothing moves, and she concludes it is broken. */
.is-bold { font-weight: 800; }
.is-italic { font-style: italic; }
.is-underline { text-decoration: underline; }
/* A coloured title still gets its left bar, so the run sheet scans the way
the printed one does. */
.tl-row:has(.tl-title.c-red) { border-left: 3px solid #b3001b; padding-left: 12px; }
.tl-row:has(.tl-title.c-blue) { border-left: 3px solid #0067a3; padding-left: 12px; }
.tl-row:has(.tl-title.c-pink) { border-left: 3px solid var(--pink); padding-left: 12px; }
.tl-row:has(.tl-title.c-teal) { border-left: 3px solid var(--teal); padding-left: 12px; }
.tl-row:has(.tl-title.c-amber) { border-left: 3px solid #d4121f; padding-left: 12px; }
.tl-row:has(.tl-title.c-green) { border-left: 3px solid #00733d; padding-left: 12px; }
/* ---------- text-only items ------------------------------------------------
No time column, no supplier — a heading or a block of detail that happens
to live inside the run sheet. */
.tl-row.is-text {
background: #faf7f9;
border-left: 3px solid var(--line);
padding-left: 12px;
}
.tl-row.is-text .tl-title {
font-size: 1rem;
letter-spacing: .01em;
}
/* ---------- section headings -----------------------------------------------
Where the day divides — morning, ceremony, reception. Placed by hand and
dragged like any other line, because only Gee knows where a day breaks.
On screen it reads as a divider so she can see at a glance whether a line
has landed in the right stretch of the day. */
/* Blue, asked for on 27 Aug: "that's pink everywhere, right? For all of those
morning-of, for the grooms, for the brides, for the ceremony... I want that
to be blue because it's too much pink happening."
(These were turned grey earlier the same day WITHOUT being asked, and
reverted. This time it is the request.)
The sky already in the palette rather than a new blue, so the sheet keeps
one set of colours. The band tint is light enough that the title needs a
darker blue than the rule to stay readable — #0067a3 on #daf0ff is too
close to call at .78rem. */
.tl-row.is-heading {
background: var(--c-sky-tint, #daf0ff);
border-left: 3px solid var(--c-sky, #0067a3);
padding-left: 12px;
margin-top: 14px;
}
.tl-row.is-heading .tl-title {
color: #0067a3;
font-size: .78rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
/* 🛑 SLIM — "A", chosen 26 September. Gee: "It's too big. It doesn't have to
be this thick… It's just to be able to break it up." Measured 83px on every
heading on Solin & Rony: 11px padding, the title on one line, the place chip
on the next, and an invisible "+ Add notes" row underneath still holding
its space. Now the title, the chip and the hover links share ONE line with
6px padding — about 38px. Same colours, words, chip and tag; her copy and
the couple's copy both draw `.tl-row.is-heading`, and print.css has its own
copy of this. Only headings — no other row is touched. */
.tl-row.is-heading {
padding-top: 6px;
padding-bottom: 6px;
align-items: center;
}
.tl-row.is-heading .tl-main {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: 4px;
}
.tl-row.is-heading .who-line,
.tl-row.is-heading .tl-adds { margin-top: 0; }
/* A note on a heading still gets a line of its own. */
.tl-row.is-heading .tl-main > .tl-notes { flex-basis: 100%; }
/* ---------------------------------------------------------------------------
Section heading bands — her choice, per heading. 9 September 2026.
Gee, looking at RECEPTION · METROPOLIS: "we want to also be able to change
the colors of that. Right now it's blue but we want to be able to choose
from those beautiful pastel colors."
Six of these are the door tints the sheet already uses, so a coloured
heading agrees with the venue chips beside it. Butter and Stone are new.
⚠️ TINT AND DEEP TOGETHER, ALWAYS. The band is the pale one and the title is
the dark one; setting only the background gives you #0067a3 lettering on a
pink band, which is the state this had for about a minute while it was
written. Every band below sets three things: background, left rule, title.
No `.band-blue` rule exists on purpose — blank IS blue, and it is already
drawn by the two rules above. Adding one would be a second copy to keep in
step. The SWATCH needs a `.band-blue` (there is one further down) because a
swatch has no blank state to fall back to.
--------------------------------------------------------------------------- */
.tl-row.is-heading.band-mint { background: var(--c-teal-tint); border-left-color: var(--c-teal); }
.tl-row.is-heading.band-lavender { background: var(--c-indigo-tint); border-left-color: var(--c-indigo); }
.tl-row.is-heading.band-rose { background: var(--c-plum-tint); border-left-color: var(--c-plum); }
.tl-row.is-heading.band-peach { background: var(--c-peach-tint); border-left-color: var(--c-peach); }
.tl-row.is-heading.band-sage { background: var(--c-sage-tint); border-left-color: var(--c-sage); }
.tl-row.is-heading.band-butter { background: var(--c-butter-tint); border-left-color: var(--c-butter); }
.tl-row.is-heading.band-stone { background: var(--c-stone-tint); border-left-color: var(--c-stone); }
.tl-row.is-heading.band-mint .tl-title { color: var(--c-teal); }
.tl-row.is-heading.band-lavender .tl-title { color: var(--c-indigo); }
.tl-row.is-heading.band-rose .tl-title { color: var(--c-plum); }
.tl-row.is-heading.band-peach .tl-title { color: var(--c-peach); }
.tl-row.is-heading.band-sage .tl-title { color: var(--c-sage); }
.tl-row.is-heading.band-butter .tl-title { color: var(--c-butter); }
.tl-row.is-heading.band-stone .tl-title { color: var(--c-stone); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
width: 26px;
height: 26px;
padding: 0;
border: 2px solid var(--line);
border-radius: 50%;
background: #fff;
cursor: pointer;
transition: transform .1s ease, border-color .1s ease;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-selected { border-color: var(--ink); }
.swatch.is-none {
background:
linear-gradient(to top left, transparent calc(50% - 1px), var(--ink-faint) 50%, transparent calc(50% + 1px));
}
/* The swatch shows the colour as a filled circle, so the colour classes above
(which set text colour) have to be overridden here. */
.swatch.c-red { background: #b3001b; }
.swatch.c-blue { background: #0067a3; }
.swatch.c-pink { background: var(--pink); }
.swatch.c-teal { background: var(--teal); }
.swatch.c-amber { background: #d4121f; }
.swatch.c-green { background: #00733d; }
.swatch.h-yellow { background: #ffe89c; }
.swatch.h-orange { background: #ffd0a1; }
.swatch.h-pink { background: #ffc6dd; }
.swatch.h-blue { background: #bcdcff; }
.swatch.h-green { background: #aeecc6; }
.swatch.h-grey { background: #e3dde1; }
/* Band swatches — the section-heading colours. Drawn as the band itself: the
pale fill with its own dark rule around it, so the circle in the menu is a
small picture of the heading you are about to get rather than a dot in some
related colour. `band-blue` is the no-choice default and needs a rule here
even though the row does not — a swatch has no blank state to fall back to. */
.swatch.band-blue { background: var(--c-sky-tint); border-color: var(--c-sky); }
.swatch.band-mint { background: var(--c-teal-tint); border-color: var(--c-teal); }
.swatch.band-lavender { background: var(--c-indigo-tint); border-color: var(--c-indigo); }
.swatch.band-rose { background: var(--c-plum-tint); border-color: var(--c-plum); }
.swatch.band-peach { background: var(--c-peach-tint); border-color: var(--c-peach); }
.swatch.band-sage { background: var(--c-sage-tint); border-color: var(--c-sage); }
.swatch.band-butter { background: var(--c-butter-tint); border-color: var(--c-butter); }
.swatch.band-stone { background: var(--c-stone-tint); border-color: var(--c-stone); }
/* The chosen one needs to beat the border-colour above, which the plain
.is-selected rule earlier does not — it comes first and is no more specific. */
.swatch[class*="band-"].is-selected {
border-color: var(--ink);
box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--ink);
}
/* Highlight swatches are squares — the same distinction Aisle Planner draws
between the font colour and the pen. */
.swatch[class*="h-"] { border-radius: 5px; }
.swatch.sm { width: 20px; height: 20px; border-width: 1px; }
/* ---------- style bars ----------------------------------------------------- */
.style-bar,
.rt-toolbar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 7px 9px;
border: 1px solid var(--line);
border-radius: 8px;
background: #faf7f9;
}
.rt-toolbar {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}
.rt-btn {
min-width: 28px;
height: 28px;
padding: 0 7px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--ink);
font-size: .92rem;
line-height: 1;
cursor: pointer;
}
/* The bullet and the "1." are glyphs standing in for a whole idea, so they get
a touch more size than the B and the I — at .92rem a dot point reads as a
speck of dust. */
.rt-btn.rt-list { font-size: 1rem; font-weight: 700; }
.rt-btn:hover { background: #fff; border-color: var(--line); }
.rt-btn.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
/* "Just for me" is a word, not a letter, so it cannot be a 26px square like
the B and the I. */
.rt-private {
width: auto;
padding: 0 10px;
font-size: .78rem;
font-weight: 600;
white-space: nowrap;
}
/* Words that will not print on a supplier's copy.
Marked on screen rather than left to memory — the whole feature is useless
if she cannot tell at a glance which half of a note is private. A dashed
underline and a faint tint: visible while reading the run sheet, quiet
enough not to compete with the colours that mean something on the day. */
.is-private-note {
background: var(--grey-tint, #f2f0f1);
border-bottom: 1px dashed var(--ink-faint, #a0949a);
border-radius: 2px;
padding: 0 2px;
}
/* One line of a dot-pointed or numbered note.
⚠️ THIS RULE IS THE ONLY THING A LIST IS. The "•" and the "1." are real
characters typed into the line — see markNoteLists() in ui.js — so a note
still reads as a list with this stylesheet missing, in a plain-text export,
or on a screen that has never heard of the class. All this does is hang the
indent, so a line that wraps sits under its own words instead of falling
back to the margin beside the marker.
inline-block, not block: notes are a flat run of lines separated by ,
and a block here would give every bullet a second empty line under it. */
.note-li {
display: inline-block;
vertical-align: top;
max-width: 100%;
padding-left: 1.15em;
text-indent: -1.15em;
}
.rt-btn.is-on:hover{ background: var(--teal-deep); }
.rt-sep {
width: 1px;
height: 20px;
background: var(--line);
margin: 0 2px;
}
/* ---------- the notes editor ----------------------------------------------- */
.rt-editor {
min-height: 92px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 8px;
border-top-left-radius: 0;
border-top-right-radius: 0;
background: #fff;
font: inherit;
font-size: .92rem;
line-height: 1.5;
color: var(--ink);
overflow-y: auto;
max-height: 260px;
}
.rt-editor:focus {
outline: 2px solid var(--teal);
outline-offset: -1px;
}
.rt-editor:empty::before {
content: attr(data-placeholder);
color: var(--ink-faint);
}
/* ---------- budget: bank columns ------------------------------------------ */
.bg-table .mono {
font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
font-size: .82rem;
letter-spacing: .01em;
}
/* Details coming from the supplier record rather than typed on this line. */
/* Pay this one by card. Migration 102.
Gee, 12 September: "some invoices are paid directly… They just have to click
the button to go to the page to pay by credit card." And: "The payment link
must be accessible to the couple, absolutely."
⚠️ IT SITS IN THE PAY METHOD CELL, beside the word "Card" that explains it,
rather than in a column of its own — a whole column that is empty on every
EFT and cash line is nine-tenths blank on a real budget.
Teal because it is an action that takes you somewhere, not money and not a
warning: green already means paid, crimson means late, orange means a
finding. The couple sees this exact cell — their budget is this table MOVED,
not a copy — so it has to read as a button to somebody who has never used
the app. */
.bg-table .pay-link {
display: inline-block;
margin-left: 7px;
padding: 1px 9px;
border: 1px solid var(--teal-deep);
border-radius: 999px;
background: var(--surface);
color: var(--teal-deep);
font-size: .7rem;
font-weight: 700;
letter-spacing: .03em;
text-decoration: none;
white-space: nowrap;
}
.bg-table .pay-link:hover { background: var(--teal-deep); color: #fff; }
.bg-table .pay-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
/* It is a link to somewhere else, so it prints as nothing useful — a pill
saying "Pay" on paper is a button nobody can press. */
@media print { .bg-table .pay-link { display: none; } }
/* (The `.bg-bank.is-inherited` rule that used to sit here has gone. It was the
SECOND definition of a selector declared again 2,200 lines below, and the
two disagreed — --ink-soft here, --ink-faint and italic there — so the
later one silently won and this line had no effect at all. One definition,
beside the other bg-bank rules. See one-idea-must-have-one-spelling. */
.bg-table .bg-date { white-space: nowrap; }
.bg-table.hide-bank .bg-bank { display: none; }
/* The Estimate and Difference columns, switched off from the toolbar. Same
mechanism as the bank details above: a class on the table, not a rebuild of
the rows, so nothing about the data changes when they are hidden. */
.bg-table.hide-estimate .col-estimate { display: none; }
.bg-table.hide-difference .col-difference { display: none; }
/* ---------- task assignees ------------------------------------------------ */
.who-bubble {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-top: -1px;
border: 1px solid var(--teal);
border-radius: 50%;
color: var(--teal-deep);
font-size: .66rem;
font-weight: 700;
letter-spacing: .02em;
}
.who-bubble.is-empty { border-color: var(--line); color: var(--ink-faint); }
.who-bubble.lg {
width: 32px;
height: 32px;
margin-right: 10px;
border-color: var(--pink);
color: var(--pink);
font-size: .74rem;
}
.task-group.is-assignee .task-group-head {
align-items: center;
text-transform: none;
letter-spacing: .02em;
font-size: .95rem;
}
.task-link { font-size: .78rem; }
/* "Notion" on a task that was pulled from the board rather than typed here.
A quiet chip, not a colour: it answers "where did this come from" and must
not compete with the date or the person the task belongs to. */
.task-source {
display: inline-block;
padding: 1px 7px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--line-soft);
color: var(--ink-soft);
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-decoration: none;
vertical-align: 1px;
}
.task-source:hover {
border-color: var(--ink-faint);
background: #fff;
color: var(--ink);
}
/* ---------- suppliers on a wedding ---------------------------------------- */
/* The templates list in Settings. A name alone tells you nothing about whether
a template is worth applying, so every row says what is in it. */
.tpl-group { margin-bottom: 22px; }
.tpl-group h3 {
margin: 0 0 2px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--teal-deep);
}
.tpl-group .ov-sub { margin-bottom: 10px; }
.tpl-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #fff;
margin-bottom: 6px;
}
.tpl-main { min-width: 0; flex: 1; }
/* Ticked by default on the sign-in card. Sits under the code button rather
than beside it: a checkbox on the same line as a primary button gets
half-pressed on a phone. */
.login-stay {
display: flex;
align-items: center;
gap: 8px;
margin: 12px 0 2px;
font-size: .86rem;
color: var(--ink-soft);
}
/* A modal that asks one thing does not want the width of one that holds a
whole wedding. */
.modal-sm { max-width: 420px; }
/* ---------------------------------------------------------------------------
The status pill.
One shape, three colours, used on every tab. A pill and never a background,
because the arrival cards already colour a whole card by VENUE — pink is the
bride's, green is the church — and a green background meaning "confirmed"
sitting next to a green card meaning "church" is exactly the confusion that
made the run sheet unreadable in the first place.
Different shape, different place: venue is a heading or a fill, status is a
small rounded thing on the right. They can never be mistaken for each other.
--------------------------------------------------------------------------- */
.pill {
display: inline-block;
padding: 2px 9px;
border-radius: var(--radius-pill);
font-size: .72rem;
font-weight: 600;
letter-spacing: .01em;
white-space: nowrap;
}
.pill.is-ok { background: var(--ok-tint); color: var(--ok); }
.pill.is-warn { background: var(--warn-tint); color: var(--warn); }
.pill.is-late { background: var(--late-tint); color: var(--late); }
/* Everything that was already saying "overdue" or "done" in its own colour now
says it in the same three. Repointed rather than rewritten: these rules were
scattered across the checklist, the budget, the overview and the supplier
stages, each with its own green and its own red. */
.ov-list .ov-when.is-overdue,
.task-meta .due.is-overdue,
.task-due.is-overdue,
.bg-table .is-overdue { color: var(--late); font-weight: 600; }
/* Which door a line belongs to, on the line, in that door's own colour.
This is what replaced the section it used to sit inside — the same colour
the place already wears on its arrival card, so "pink means the bride's"
holds from the top of the sheet to the bottom.
Floated right so the day reads as time down the left and place down the
right, and neither column interrupts the other. */
.tl-door {
flex: 0 0 84px;
align-self: flex-start;
margin-top: 1px;
padding: 2px 0;
border-radius: var(--radius-pill);
font-size: .68rem;
font-weight: 700;
letter-spacing: .03em;
white-space: nowrap;
text-transform: none;
text-align: center;
}
/* A line that names nowhere still holds the column open, so every tag on the
page sits on the same vertical line. An empty cell that collapses would
stagger the whole right edge and undo the point of having a column. */
.tl-door.is-empty { background: none; }
/* It is a BUTTON now (17 Sept) — Gee: "there is no way for me to be able to
amend it or change it on the right-hand side, which I should be able to do."
These four lines only undo what a browser does to a