only when somebody is assigned
THE TITLE
So a task WITH an assignee lost the assignee and kept its title. A task
with NOBODY assigned had the title block sitting next to the checkbox β
and lost the title instead. That is the four-out-of-fifty pattern in her
PDF exactly: the four that printed were the four with a name on them.
A selector that hides "whatever happens to be next" cannot know what it
is hiding. The labels beside the filter checkboxes it was aimed at are
.check-inline, which is still in this list and does the job precisely. */
button, .btn, .check-inline {
display: none !important;
}
/* π THREE THINGS THAT ARE BUTTONS AND ARE NOT CONTROLS.
Gee, 17 September: *"the round on the right-hand side, details are not
coming up, so the place is not coming up when printed⦠When I go to the
version for me, it should automatically have all of that on it."*
She was right, and it was a REGRESSION FROM THE SAME DAY. The place tag was
a plain `` until it was made pressable that morning so she could set a
place from the sheet. The moment it became a `` the rule above
swallowed it β and `.tl-row .tl-door` still carries a full print rule,
grid column and all, that had been dead ever since.
Measured by forcing the print stylesheet on screen and reading what
survived on a real row:
title shows Β· notes shows Β· supplier shows
PLACE TAG hidden Β· PLACE CHIP hidden
β οΈ THESE THREE ONLY. Everything else that is a button on this sheet really
is a control β the gutter, the paperclip, "+ supplier", "+ place" with
nothing set. A place that HAS been set is information, and information
prints. `.who-place` is exempt only with `.is-set` for exactly that reason:
an empty "+ place" is a button and stays gone.
See check 20 in CHECKS.md, which greps for this shape so the next element
promoted to a button does not quietly drop off the paper. */
.tl-row .tl-door,
.who-place.is-set,
.tl-at {
display: inline-block !important;
}
/* π AND THE FOURTH AND FIFTH, 18 SEPTEMBER β THE SAME FAULT AS THE PLACE
TAG, FOUND THE SAME WAY. Gee, having attached a PNG to the coffee cart
line: *"How come when I print it, I can't see the attachment showing
there on the printout?"*
`π 1` on a run sheet line and `π 2 files` on a budget line are both
``, so the blanket hide above swallowed both. With nothing
attached they say "+ document" and "+ Add invoice" and really are
controls β which is why the exemption is on `.has-files`, the class the
JS only adds when the count is there. Exactly the reasoning that makes
`.who-place.is-set` exempt and a bare "+ place" not.
β οΈ CHECK 20 COULD NOT HAVE CAUGHT THESE AND THAT IS THE REAL BUG. It
looks for a class print.css bothers to STYLE that is also a button β
and print.css had never mentioned `.tl-add-link` or `.bg-clip` at all.
A thing you never styled is invisible to a check that reads your styles.
CHECK 38 is the widened rule.
π AND TWO THINGS THE FIRST ATTEMPT GOT WRONG, BOTH CAUGHT BY FORCING
THIS STYLESHEET ON SCREEN AND READING THE CLIP RATHER THAN TRUSTING IT:
1. THE COMMENT WAS INSIDE THE SELECTOR LIST ABOVE. Everything after it
was dropped by the parser β the rule came back as three selectors,
not five, and the clip stayed hidden. A comment goes above a rule,
never between its selectors.
2. `.bg-clip` IS ALREADY HIDDEN FURTHER DOWN by `.bg-table .bg-clip`,
which is two classes and comes LATER β so a plain `.bg-clip.has-files`
ties on specificity and loses on order. It carries `.bg-table` here
for that reason. `a-duplicate-rule-wins-the-cascade`.
π AND NEITHER OF THOSE TWO FIXES REACHED HER PDF. Both were correct in
the file and the clip was still missing when she pressed Save as PDF.
THE THIRD ATTEMPT STOPPED FIGHTING THE CASCADE ALTOGETHER: `timeline.js`
and `budget.js` emit a `` beside the button when
there are files, and a span never meets `button { display: none }` at
all. The button keeps its blanket hide; the span is what prints. Same
trick as `#task-print` uses for the checklist.
π AND THE FOURTH ATTEMPT ALSO FAILED, WHICH IS WHY THERE IS NOTHING
CLEVER LEFT HERE. A print-only `` was in the DOM and the rule was
in this file and her PDF still had no paperclip. So the run sheet now
draws an ORDINARY VISIBLE TAG β `.tl-clip-tag`, grape, solid, reading
"π 1 file" β which she asked for anyway and which needs no help from
this stylesheet to survive printing. Nothing toggles it, so nothing can
drop it.
β οΈ AND THE FILL STAYS ON PAPER. It was stripped here at first "so it
does not eat toner", which put the tag straight back to being invisible:
*"I can't see the colour clearly. It's too mixed up with everything."*
The fill is the whole point β it is the only solid chip on a line of
outlines. `print-color-adjust: exact` is already set at the top of this
file, so it survives. A tag is a few square millimetres of ink. */
.tl-clip-tag {
font-size: 7.5pt !important;
}
/* π AND HER TICK TAKES ALL THREE BACK OFF, ON A SUPPLIER'S COPY ONLY.
Gee, 18 September, after being shown four ways to change the sheet and
wanting none of them: *"I actually don't agree to any of this because
there are tags and stuff in place that pick all of this up. All I want is
for me to be able to choose if I want to show it or not⦠I want one on
the supplier sheet that can be completely hidden, and I get to choose
what is hidden. I do not want to delete it at all."*
So nothing above changes, no default moves, and no data is touched. This
is three lines of ink on one printout, and the attribute only exists for
as long as the print dialog is open.
β οΈ ALL THREE, BECAUSE "COMPLETELY HIDDEN" IS WHAT SHE ASKED FOR. The chip
beside the supplier, the tag on the right edge, AND the heading's own
"at Bride's home". Leaving the heading would have been me deciding which
half of her word "completely" to honour.
β οΈ IT HAS TO OUT-SPECIFY THE RULE ABOVE, which is `display: inline-block
!important`. `:root[...]` in front makes each selector one class heavier,
so this wins on specificity at equal importance rather than by luck.
`a-duplicate-rule-wins-the-cascade` is the fault this avoids. */
/* π THE RIGHT-HAND TAG IS NOT PART OF THIS TICK ANY MORE. 19 September.
It used to take three things at once and Gee found out the hard way, on a
printed supplier copy with an empty right-hand column:
*"On the right-hand side, where the location was⦠they have gone. I don't
understand why it is not there."*
Her ruling, once we had both looked at the same sheet: *"the ones in the
middle are the ones that can get hidden for the place. The right-hand side
needs to stay."*
β οΈ SO `.tl-row .tl-door` IS DELIBERATELY ABSENT BELOW. The tick now takes
the chip beside the supplier and the venue band under a heading β the two
that repeat what the line already says β and never the column down the
edge, which is the one a supplier reads the page by.
β οΈ AND index.html's HINT SAYS SO. It used to promise "the chip beside the
supplier and the tag on the right edge", which is now a lie about what the
tick does; a control that describes itself wrongly is worse than one that
says nothing. */
:root[data-print-places="off"] .who-place.is-set,
:root[data-print-places="off"] .tl-at {
display: none !important;
}
/* π AND BELOW A HEADING SHE MARKED "Hide places from here down" (135).
Her printout follows her screen β she chose that. Only the chip beside the
supplier; the right-hand column and the heading's "at β¦" still print.
Has to out-weigh `.who-place.is-set { display: inline-block !important }`
above, and (0,3,1) against (0,2,0) does, at equal importance. */
li.tl-row.places-off .who-place.is-set { display: none !important; }
/* β οΈ SELECTION CONTROLS ARE EDITING, NOT DOCUMENT. The rule above already
takes the buttons inside these bars, which would have left a stray "7
selected" floating on a printed run sheet with no buttons beside it β and
a checkbox is an `input`, which nothing above reaches at all, so a ticked
budget line would have printed with a tick nobody could explain.
Both screens, in one place, because they are one control wearing two class
names β and the budget's half shipped a deploy earlier without this, which
is exactly the twin-that-disagrees pattern this file keeps paying for. */
.no-print,
.tl-picked-bar, .bg-picked-bar,
.tl-pick, .bg-pick,
/* β οΈ AND THE DRAWERS. "3 set aside Β· Show" on a printed run sheet is an
editing control on a document a supplier drives the day from β and worse,
it advertises to them that something was removed. Added in the same rule
as the selection bars so the pair cannot drift apart. */
.tl-aside-bar, .bg-aside-bar, .task-aside-bar,
/* The toolbar chip goes with its drawer bar, for the same two reasons: it is
an editing control on a document a supplier drives the day from, and
"3 set aside" advertises to them that something was removed. */
.aside-chip,
/* The reason pill goes with them, on all three tabs. A parked row should
never reach a printed page at all β eventsFor() and renderBudget() filter
them out well before this β but if one ever does, "No from VIP
questionnaire β Photobooth β No" is the last thing a supplier should read
off a run sheet. Belt and braces, one line each. */
.bg-aside-why, .tl-aside-why, .task-aside-why {
display: none !important;
}
/* A link in print is just words; the underline and blue are noise. */
a { color: inherit !important; text-decoration: none !important; }
/* ...except the progress stages, which are buttons only because you click
them. On paper they are the answer to "where are we up to with this
supplier", which is most of why the sheet gets printed.
The rule above hid every button, and five of the six stages ARE buttons β
only "Paid" is a span, because it is derived from the budget rather than
clicked. So the printed supplier list showed one lone circle and "0/6",
which told nobody anything. */
button.step {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 0 3px;
border: 0;
background: none !important;
}
.stepper { display: flex !important; align-items: flex-start; gap: 2px; }
/* Ink, not colour: a green fill costs a lot of toner and reads no better
than a filled circle. Done is solid, not-done is an outline. */
.step-dot {
width: 9px;
height: 9px;
border: 1.5px solid #6c6067 !important;
border-radius: 50%;
background: #fff !important;
}
.step.is-done .step-dot { background: #00733d !important; border-color: #00733d !important; }
.step.is-skipped { opacity: .35; }
.step-name {
font-size: 5.8pt;
letter-spacing: .02em;
text-transform: uppercase;
color: #6c6067;
white-space: nowrap;
}
.step-count { font-size: 7pt; font-weight: 700; margin-left: 4px; }
/* Certificate of Currency (142): printed only where a venue needs it. A faint
"COC" on every supplier of every wedding would be noise on paper. */
.step.is-coc-off, .coc-sep { display: none !important; }
.step.is-coc-got .step-dot { background: #6200ea !important; border-color: #6200ea !important; }
.step.is-coc-need .step-dot { border-color: #4a00b0 !important; }
/* ---- the run sheet, which is the point ------------------------------ */
.tl-list { display: block; }
.tl-row {
display: grid;
/* 144px, not 88. A single time β "8:30 am" β fits in 88 easily, which is
how this shipped and why it looked fine for weeks. A RANGE does not:
on Tiffany & Liam's printed sheet "11:30 am - 12:30 pm" ran under the
title beside it and the "pm" was overprinted by the word "Photography".
Measured at the print size, the widest real value is 137px, so this is
that plus a little air rather than another guess. */
/* Three columns now: time, the line, and which door it is at. The place
used to be a fourth child of a TWO column grid, so it wrapped onto a row
of its own underneath and sat left-aligned under the time β which is
what Gee saw: "the layout is terrible for print and PDF". */
grid-template-columns: 144px 1fr 72px;
/* ROOM TO BREATHE. 18 September, Gee: "the running sheet is a little too
cramped... it doesn't look so squashy."
Measured on her own PDF before touching anything, on "Make-up artist
arrives @ Bride's house": the title is 18px tall, its supplier chips sit
6px under it, and from those chips to the NEXT line's title is about
17px. So the gap between two lines was smaller than one line of text,
which is exactly what reads as a wall.
β οΈ THE HAIRLINE IS PART OF IT. #f5f0f2 against white is so pale it
separates nothing, so the rows ran together even where there was room.
Was: gap 10px, padding 5px 0, border #f5f0f2; then 26px until 19 Sept.
π 18px, AND IT IS THE ONLY VALUE β HER COPY AND THE SUPPLIER COPY BOTH
READ THIS LINE. 26 -> 20 -> 18: she printed 20 and said *"the spacing is
a bit too much"*, and 18 is the last step before 16, which she called
squashed on 18 September. The page count does not move between 20 and
16, so this is feel and nothing else.
β οΈ ONE VALUE FOR BOTH COPIES, because she asked for that in those
words: *"it should be for both the printout"*. The supplier rule below
keeps only its column gap, which is horizontal and has nothing to do
with the room between actions. */
gap: 20px;
padding: 18px 0;
border: none;
border-bottom: 1px solid #ded2d7;
border-radius: 0;
/* Never split a line across two pages β half a run sheet entry at the
bottom of a page is how a supplier misses the second half. */
break-inside: avoid;
page-break-inside: avoid;
}
.tl-time {
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
/* β οΈ THE SIZE CAME BACK DOWN. 19 September: I took the time to 15px as a
second anchor and she printed it β *"you made the timings way too bigβ¦
it wasn't about the fonts in there."* The title carries the line; the
time only has to be findable beside it. Left near-black rather than red,
which she has not objected to and which is what dropped the colour
count on a row. */
color: #2a2126;
}
/* β οΈ THE SMALL PRINT GOES QUIET. These three were all bold, and two of them
pink, on every single line. They are reference, not instruction. */
.tl-dur { font-weight: 500 !important; color: #8a7d84 !important; }
/* π THE PLACE TAG LEFT THIS RULE ON 27 SEPTEMBER. It was greyed here with
the duration, while the chip beside the supplier printed in the place's
own colour β two looks for one fact on the same line. Gee chose black
writing on the place's own background for all three place elements, on
screen and on paper (CHECK 52: one document, two renderers). */
.tl-row .tl-door { font-weight: 700 !important; color: #2a2126 !important; }
/* π THE ARRIVAL CHIP IS NOT SMALL PRINT. 19 September, Gee: *"I think
'arrives 8 am' needs to be bolded."*
It was in the rule above, greyed to #8a7d84 at weight 500 with the place
tag and the duration β and it is not the same kind of thing. A supplier
turning up an hour before the line says is the one fact on that row a
reader can get wrong. Bold, and in its own pink, which is also what the
SCREEN has always drawn (CHECK 52 β one document, two renderers). */
.tl-arr {
font-weight: 700 !important;
color: #c31465 !important;
/* 0px gap to the time above it read as one thing sitting on another. */
margin-top: 4px;
}
/* β οΈ AND THE ARRIVAL CHIP SHRINKS TO ITS WORDS TOO, for the same reason as
the TBC mark below: it is a child of the 144px time cell, so as a block it
painted a 144px pink bar under the duration instead of a pill round
"arrives 8:00 am". 19 September, found on her printed sheet. */
/* β οΈ `width: max-content` ON A BLOCK, NOT `inline-block`. inline-block made
the chip flow onto the END OF THE TIME on any row with no duration β
"9:00 am arrives 8:45 am" with a 0px gap, which is the collision it was
meant to cure moved one place along. A block with max-content keeps its
own line AND still hugs its words. 19 September. */
.tl-arr { display: block; width: max-content; }
/* A time that isn't confirmed still prints, with TBC beside it β highlighted
as well as red, because on a printed page of fifty lines red type alone
still scans past and a block of colour does not. Same idea as Gee's own
highlighter marks, which is why print-color-adjust is already exact. */
.tl-row.is-tbd .tl-time {
/* β οΈ IT HAS TO SHRINK TO ITS OWN WORDS, and `inline-block` CANNOT DO IT.
`.tl-time` is the grid CELL, not something inside it, and a grid item is
blockified β `display: inline-block` computes straight back to `block`,
which is why the first attempt changed nothing. So a background on it
painted the whole 144px column and "TBC" printed as a wide pink slab
that reads like a broken form field.
`justify-self: start` plus `width: max-content` is the pair that works
on a grid item. 19 September, found on her printed sheet. */
justify-self: start;
width: max-content;
color: #b3001b !important;
background: #ffe0e3 !important;
padding: 0 4px;
border-radius: 2px;
}
/* The couple print the same sheet, and their rows carry the class too. */
.tl-readonly .tl-row.is-tbd .tl-time { color: #b3001b !important; }
/* A text block carries no time, so the two-column grid drops it into the
144px time column and it wraps two words at a time β the IMPORTANT DETAILS
block on Tiffany & Liam printed as a ragged ribbon down the left edge.
It is a heading or a paragraph; give it the page.
Blue, not pink. The page already carries pink twice β the masthead rule and
the wedding day band β and a third made the note read as decoration rather
than as the thing that goes wrong if nobody reads it. Blue is the furthest
from the brand on the page, so it reads as reference. Gee's own marks
inside the block keep their colours; this is only the panel around them. */
.tl-row.is-text {
display: block;
background: #e6f1fb !important;
border: none;
/* The screen colours a row's left rule to match a coloured title, so the
red on "IMPORTANT DETAILS:" was painting a red bar down a blue panel.
The panel owns the rule; her red stays on the words. */
border-left: 3px solid #378add !important;
border-radius: 0;
/* It is the thing that must not be skimmed, so it gets the most air of
anything on the page. Was 6px 10px and 6px 0. 18 September. */
padding: 11px 13px;
margin: 16px 0;
break-inside: avoid;
page-break-inside: avoid;
}
/* Where the day divides. Past page one the pink band at the top is gone and
every line looks alike, so a supplier holding page three cannot tell the
morning from the reception. These re-orient on every page and cost almost
nothing in length. Paler than the wedding day band above them, so they read
as a subdivision of it rather than as a second document starting. */
/* Blue on paper as well as on screen β asked for 27 Aug. */
.tl-row.is-heading {
display: block;
background: #daf0ff !important;
border: none;
border-left: 3px solid #0067a3;
border-radius: 0;
/* A section heading is what makes the day read as blocks instead of one
long list, and it had less air above it than a plain line. Was 3px 9px
and 9px 0 3px. 18 September. */
/* 8px -> 4px, 26 September: SLIM, the same "A" as the screen β title and
place on one line. The margins above and below are the air between
sections (18 September) and are deliberately left alone. */
padding: 4px 12px;
margin: 34px 0 11px;
break-after: avoid;
page-break-after: avoid;
break-inside: avoid;
}
.tl-row.is-heading .tl-title {
color: #0067a3;
font-size: 8.5pt;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
/* HER BAND COLOUR GOES ON PAPER TOO. Added 9 Sept with the picker.
Literal hex, not the tokens: this block already writes #daf0ff by hand for
the same reason β a print stylesheet that inherits a variable prints
nothing at all if the variable has not resolved, and a run sheet that
comes out of the printer with no section bands is worse than one that
comes out blue.
!important on the background because the default band above uses it, and
a band that only wins on screen is a band that lies about the printout. */
.tl-row.is-heading.band-mint { background: #d9f7f2 !important; border-left-color: #00695c; }
.tl-row.is-heading.band-lavender { background: #eae0ff !important; border-left-color: #4a00b0; }
.tl-row.is-heading.band-rose { background: #ffe3ef !important; border-left-color: #b3145e; }
.tl-row.is-heading.band-peach { background: #ffe3e4 !important; border-left-color: #d4121f; }
.tl-row.is-heading.band-sage { background: #d6f7e2 !important; border-left-color: #00733d; }
.tl-row.is-heading.band-butter { background: #fff3c4 !important; border-left-color: #8a6100; }
.tl-row.is-heading.band-stone { background: #ece7ea !important; border-left-color: #5f5560; }
.tl-row.is-heading.band-mint .tl-title { color: #00695c; }
.tl-row.is-heading.band-lavender .tl-title { color: #4a00b0; }
.tl-row.is-heading.band-rose .tl-title { color: #b3145e; }
.tl-row.is-heading.band-peach .tl-title { color: #d4121f; }
.tl-row.is-heading.band-sage .tl-title { color: #00733d; }
.tl-row.is-heading.band-butter .tl-title { color: #8a6100; }
.tl-row.is-heading.band-stone .tl-title { color: #5f5560; }
/* The place, in the third column, on the same line as the entry it belongs
to. Right-aligned so the places form a column down the edge of the page
the way the times form one down the other side β a supplier holding page
three can find every line at their venue without reading a word.
A hairline as well as a fill, because a mono printer throws the fill away
and the tag has to still read as a tag. */
.tl-row .tl-door {
grid-column: 3;
justify-self: end;
align-self: start;
margin: 1px 0 0;
padding: 0 5px;
/* β οΈ A FAINT HAIRLINE, NOT `currentColor`. The writing is black now, and a
black ring would bring back the very ring Gee asked to lose. But a mono
printer still throws the fill away, so paper keeps a hairline light
enough to read as a tag edge and nothing more. Screen has none. */
border: 1px solid rgba(42, 33, 38, .18);
border-radius: 999px;
/* 7.5pt, not 6.5. Gee, 18 September: *"The colour of that circle should
be a different colour because it's not easily decipherable."*
β οΈ IT WAS NEVER THE COLOUR. All five tones are the app's own and each
place now carries exactly one β pink, blue, green, plum, coral. What
made it hard to read was 6.5pt: coloured text that small goes to mush
whatever hue it is. `bold-is-not-only-weight` says the levers when
weight is already maxed are SIZE, contrast and letter-spacing, and
this is the size one. A point does not cost a line break β the column
is fixed at 72px and the longest label is "Reception". */
font-size: 7.5pt;
font-weight: 700;
line-height: 1.45;
letter-spacing: .01em;
text-align: center;
white-space: nowrap;
}
/* A line that names nowhere prints nothing at all. On screen the empty cell
holds the column open so the right edge does not stagger; on paper the
column is fixed at 72px whether or not anything sits in it, so an empty
box would only be a box. */
.tl-row .tl-door.is-empty { display: none; }
/* These three lay themselves out as blocks rather than the grid, so a place
in them would land wherever it fell. None of them is a moment at a venue:
a note, a divider, and a card that names its own venue in its heading. */
/* π `!important`, BECAUSE WITHOUT IT THIS RULE HAS NEVER ONCE WORKED.
19 September, off her printed sheet: nine little `Bride's`, `Groom's`,
`Church` and `Reception` pills hanging under the headings, jammed against
the LEFT margin where nothing else on the page sits.
Gee: *"it looks terrible when you print it⦠it doesn't look professional."*
They are these three rows' place tags, and the rule below has said to hide
them since the day it was written. It loses every time to
`.tl-row .tl-door { display: inline-block !important }` further up β the
rule that puts the place tag BACK after the print sheet hides every
button. `!important` beats specificity, so the more specific selector here
never had a say. `a-duplicate-rule-wins-the-cascade`, in its nastiest
form: both rules are correct and the wrong one wins. */
.tl-row.is-text .tl-door,
.tl-row.is-heading .tl-door,
.tl-row.is-arrivals .tl-door { display: none !important; }
/* π THE "WHERE" BOX, 30 SEPTEMBER. Gee chose it off a mock-up of Tiffany's
own lines, after saying the printed sheet was *"so spaced out and so
awkward"* and that *"Bride's"* beside *"Bride's House"* looked messy.
The right-hand column stays (her 19 Sept rule) and becomes one box, the
same width on every line: the tag, bold, and under it the building on
every line that has one saved β her "A", after the first version (only
where the day moved) left Bride's boxes one line and Groom's two. The
chip beside the supplier leaves the paper, because the box now says it.
β οΈ `li.tl-row`, NOT `.tl-row`. The couple's copy draws `div.tl-row` with a
span tag (portal.js) and was deliberately not part of this.
β οΈ AND ON SCREEN TOO, SINCE THE SAME AFTERNOON β she asked for the same
view. styles.css carries the screen half; keep the two in step. CHECK 80.
β οΈ 10px, not 18: she asked for less space than 18 and *"a little bit
more breathing space"* than the 6 first shown. */
li.tl-row {
grid-template-columns: 144px 1fr 124px;
padding: 10px 0;
}
li.tl-row .who-line .who-place.is-set { display: none !important; }
/* π FITS ITS WORDS ON PAPER TOO β 21 October, CHECK 227. Gee, on her PDF
beside the screen: "it's not coming up that way as it is on the screen,
which is very annoying." `end`, not `stretch`: the box is as wide as its
words (up to the 124px column) and its right edge stays on the column's. */
li.tl-row > button.tl-door {
justify-self: end;
max-width: 124px;
padding: 3px 7px;
border-radius: 6px;
line-height: 1.3;
text-align: left;
white-space: normal;
}
li.tl-row .tl-door-place {
display: block !important;
font-weight: 700;
}
/* Same as the screen (styles.css): the building as bold as the tag, and a
borrowed box not faded. */
li.tl-row > button.tl-door.is-lent { opacity: 1; }
/* π THE PRINT TICK NO LONGER TAKES THE BUILDING β 21 October, CHECK 228.
It used to ("The print tick takes the building and leaves the tag"), so a
supplier copy printed with "Hide the place beside the supplier" ticked
read "Church" and "Reception" with no St Paul's Cathedral and no
Metropolis Events. Gee: "I didn't want you to get rid of the church
address and the church name, and I didn't want you to get rid of the
reception name." The tick's own hint already promised the right-hand
column always stays; now it does, building and all. */
/* Her heading switch "Hide places from here down" takes the WHOLE box, tag
and building, on every line below it β same as the screen (CHECK 74).
Gee, 30 Sept: "where I've switched it from, I wanted to no longer show
the reception." Hidden, not removed, so the column keeps its width. */
li.tl-row.places-off > button.tl-door { visibility: hidden !important; }
/* An arrivals card takes the page rather than the 144px time column β it has
no time of its own, which is the whole point of it. */
.tl-row.is-arrivals {
display: block;
background: none;
border: none;
border-radius: 0;
padding: 0;
margin: 7px 0;
break-inside: avoid;
page-break-inside: avoid;
}
/* REVERTED 27 Aug, with the screen. These cards were not the thing that
needed changing. */
.arr-card {
border: 1px solid #f0c3d7;
border-left: 3px solid #e8197a;
background: #fff !important;
padding: 6px 10px;
break-inside: avoid;
page-break-inside: avoid;
}
.arr-card-head {
margin-bottom: 3px;
font-size: 9pt;
font-weight: 700;
color: #2a2126;
}
.arr-card-list { list-style: none; margin: 0; padding: 0; }
.arr-card-list li {
display: block;
/* The tightest thing on the whole printed page β ten arrivals stacked at
1px apart, which is what the top of page two actually looks like.
18 September, with the run sheet spacing.
π 4px -> 2px AND line-height 1.45, 19 September, AND IT IS THE LAST 70
PIXELS. Her own copy's header measured 1,079 against a 1,009 page even
after the three-column key details and the packed cards, so the
Photography strip was still being cut. Across her 31 arrival lines this
is exactly what closes it: 1,079 -> 999.
β οΈ THIS WAS ALREADY THE SUPPLIER COPY'S VALUE β it is her own copy
catching up, not a new idea, which is why the two sheets now look the
same at the top. Only the arrival CARDS are affected; `.tl-row`, the
room between actions on the run sheet, is untouched. */
padding: 2px 0;
line-height: 1.45;
border: none;
color: #c31465;
font-size: 8.5pt;
font-weight: 700;
break-inside: avoid;
}
/* The time keeps its box on paper. print-color-adjust is already exact for
this block, and the chip is the thing the eye lands on when a coordinator
is holding the sheet β losing it in print would lose the point of it. */
.arr-card-list .arr-time {
font-size: 8.5pt;
flex: 0 0 auto;
min-width: 52px;
margin-right: 6px;
padding: 0 4px;
border-radius: 3px;
background: var(--tone-tint, #e2f2f2);
color: var(--tone, #0f6e56);
text-align: center;
}
.arr-card-list li.is-tbc .arr-time { background: #ffe0e3; color: #b3001b; }
/* A time she has but nobody has signed off β migration 133. Amber on paper
too, and deliberately not the red above: red on this sheet means she has
no time at all and has to ring them from the venue. This one has an
answer. It prints, because the whole reason for the tick is that the
supplier copy should not present a guess as a fact. */
.arr-card-list li.has-tbc .arr-time { background: #fbf1de; color: #7a4600; }
.arr-tbc {
display: block;
font-size: 6pt;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.tl-arr .arr-tbc { display: inline; margin-left: 3px; color: #7a4600; }
/* Same on paper as on screen: the door's colour on the head and the rule,
black names, and a long name indenting into its own column. */
/* The head fills to the card's edges rather than floating inside its
padding, so it reads as a title bar the way it does on screen instead of
a stripe with a white margin around it. */
.arr-card[class*="tone-"] { border-left-color: var(--tone); border-color: var(--tone-tint); }
.arr-card[class*="tone-"] .arr-card-head {
margin: -6px -10px 5px;
padding: 3px 10px;
background: var(--tone-tint);
color: var(--tone);
}
/* The team note and the driver strip are the two things that push a card
line onto a second row. Smaller, and the driver on its own line where it
belongs rather than trailing the name. */
.arrivals-groups .arr-note { font-size: 7pt; color: #6c6067; }
.arrivals-groups .arr-driver {
display: block;
margin-top: 1px;
font-size: 7pt;
background: none !important;
}
.arrivals-groups .arr-card-list li {
display: flex;
align-items: baseline;
color: #2a2126;
}
.arrivals-groups .arr-card-list .arr-name { flex: 1 1 auto; min-width: 0; }
.arr-card-list .arr-name { font-size: 8.5pt; color: inherit; }
.arr-card-list li.is-tbc { color: #b3001b; }
/* 700 to match the screen. "Site-wide" includes the sheet she carries around
on the day, and a printed line that is lighter than the one she checked on
screen is the same complaint in a different medium. */
/* β οΈ 26px IS SETTLED, AND 32 WAS TRIED AND REJECTED. 18 September.
*
* She asked for more room three times, so the gap went 16 β 26 β 32. At 32
* she said *"now it looks a bit too big"* and chose 26 off a side-by-side
* at true print size. **Both were 11 pages, so this was never about length.**
*
* β οΈ AND THE REASON MORE STOPPED HELPING IS THE TYPE BELOW. While every part
* of a line was the same size, space was the only thing separating one line
* from the next, so more always read as better. Once the title became the
* biggest thing on the row, the size difference did that job and the extra
* air just made a note-less line float. **If she asks for more room again,
* look at the type before the padding.** */
/* π THE JOB IS THE BIGGEST THING ON THE LINE. 18 September, third round.
*
* Gee, after two spacing changes had not helped: *"we need to work on the
* formatting again on the running sheet because it's too hard to read
* still."* Then, shown the type measured: *"I think the job is bigger, but
* I don't think that's it. I just need more padding in between."*
*
* β οΈ IT WAS NEVER THE SPACING, AND THAT IS WHY TWO ATTEMPTS FAILED.
* Measured off her own printed sheet at the real A4 width:
*
* title 13.0px notes 12.7px time 12.2px
* who 11.3px dur 10px door 10px arrives 8.7px
*
* **The title and the note were a third of a pixel apart.** Everything sat
* inside a four-pixel range, five of the seven parts were bold, and one row
* carried FIVE text colours. Nothing was bigger than anything else, so the
* eye had nowhere to land β and no amount of air between rows fixes that.
*
* So: two anchors and everything else steps back. Title 16px, time 15px,
* both near-black; the note drops to 12px in grey; the place tag, duration
* and "arrives" go quiet and unbold. Colours on a row: five β two. */
.tl-title { font-weight: 700; font-size: 10.5pt; color: #1a1418; line-height: 1.3; }
/* π THE SUPPLIER TAG RIDES WITH THE JOB. 19 September.
*
* Gee printed the sheet at 11 pages: *"it's a bit too big⦠it's about the
* distance between the next action and the next action."* She wanted the
* GAP kept and the PAGES down, which are the same thing β unless a page
* comes from somewhere that is not the gap.
*
* Measured on her own sheet at the real A4 width, 10,220px total:
*
* row gaps 3,224px titles 1,367 notes 1,025 SUPPLIER TAGS 980
*
* **980px is very nearly a whole page spent on rows holding one small
* pill.** `.who-line` is the third child of a flex COLUMN, so every tagged
* line pays a full row for it.
*
* β οΈ ORDER IS SET ON EVERY CHILD, NOT JUST THE ONE BEING MOVED.
* `order-zero-is-not-leave-me-where-i-am`: one negative order on one child
* jumped a whole row once already. Everything here is numbered explicitly,
* including a catch-all, so a child added later cannot land in the middle
* of the title line.
*
* β οΈ AND IT DOES NOT ALWAYS SAVE THE ROW. A long title β "Photography &
* videography arrive @ Groom's hotel - Team 2" β wraps the tag onto the next
* line anyway. She was shown that case before agreeing, so the saving is
* about a page, not exactly one. */
.tl-row .tl-main {
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
column-gap: 8px;
/* 0 until 19 Sept: a supplier name that could not fit the title line
landed hard underneath it and read as collided rather than deliberate.
Gee: *"some that are cramped. We don't want it cramped, but we also
don't want it too spaced out."* 4px only reaches the 23 rows where it
wraps; the 37 that sit inline are untouched. */
row-gap: 4px;
}
.tl-row .tl-main > * { order: 5; flex-basis: 100%; }
.tl-row .tl-main > .tl-title { order: 1; flex-basis: auto; }
.tl-row .tl-main > .who-line { order: 2; flex-basis: auto; }
.tl-row .tl-main > .tl-notes { order: 3; flex-basis: 100%; }
.tl-row .tl-main > .tl-adds { order: 4; flex-basis: 100%; }
/* A heading's place sits beside its title, not under it β SLIM, 26 Sept. */
.tl-row.is-heading .tl-main > .tl-at { order: 2; flex-basis: auto; }
/* The note used to butt straight onto the title with nothing between them,
so a line with notes read as one block of text rather than a heading and
its detail. 18 September, with the row spacing above.
β οΈ SMALLER AND GREYER ON PURPOSE β it is the detail under the job, and it
was competing with it. */
.tl-notes { font-size: 9pt; color: #5d524e; margin-top: 5px; line-height: 1.55; }
/* A dot point on paper. The printed column is narrower than the screen, so
this is where the hanging indent actually earns its keep β restated here
because the print sheet does not inherit a screen-only rule reliably once
the row is laid out as a grid. */
.note-li {
display: inline-block !important;
vertical-align: top;
max-width: 100%;
padding-left: 1.15em;
text-indent: -1.15em;
}
.tl-who {
display: inline-block;
/* 2px put the supplier chip almost touching the title above it, and nearly
every line on her sheet carries one β so this single value was doing
more of the crowding than the row padding was. 18 September. */
margin-top: 12px;
padding: 1px 7px;
/* π A FILLED CHIP, THE SAME AS THE SCREEN. 19 September. #ece5e8 is so
close to white that the name was teal text and nothing else, beside a
`+ supplier` button of the same teal. Gee: *"it is teal on teal and it
is very hard to distinguish"*, *"I thought it was all going to be on
the same"*. styles.css carries the identical change. */
border: 1px solid #007c85;
background: #e7f6f7;
border-radius: 9px;
font-size: 8.5pt;
}
/* A typed name still is not a supplier, on paper as on screen. */
.tl-who.is-typed { background: none; border-color: #d8cfd4; }
/* β¦and a TBC one is red on paper too, as on screen. 18 October. */
.tl-who.is-typed.is-tbc { color: #b3001b; border-color: #b3001b; background: #fdeeec; }
/* Gee's own marks, kept exactly as they read on screen. */
.c-red { color: #b3001b !important; }
.c-blue { color: #0067a3 !important; }
.c-teal { color: #007c85 !important; }
.c-pink { color: #c31465 !important; }
.c-amber { color: #d4121f !important; }
.c-green { color: #00733d !important; }
.c-black { color: #2a2126 !important; }
/* No pen overrides on paper. They used to sit here as five slightly
different values β pink differed from the screen by a single unit, which
was a typo, not a decision β so a highlighted word printed a different
colour than the one you chose. The screen values now carry through. */
/* 800 for the same reason as on screen β the base is 700 now, so 700 here
would print her emphasised lines identically to every other line. */
.is-bold { font-weight: 800 !important; }
.is-italic { font-style: italic !important; }
.is-underline { text-decoration: underline !important; }
/* ---- tables --------------------------------------------------------- */
.table-scroll { overflow: visible !important; }
table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
thead { display: table-header-group; } /* repeat headings on every page */
tr { break-inside: avoid; page-break-inside: avoid; }
th {
padding: 5px 8px;
border-bottom: 1.5px solid #2a2126;
color: #2a2126 !important;
font-size: 8pt;
letter-spacing: .08em;
text-align: left;
}
td { padding: 5px 8px; border-bottom: 1px solid #f5f0f2; }
.bg-table tr.bg-cat th {
padding-top: 14px;
border-bottom: 1.5px solid #1e3f7d;
color: #1e3f7d !important;
}
/* Never let a category heading be the last thing on a page.
"CHURCH & CELEBRANT" printed alone at the foot of page 1 of Tiffany &
Liam's budget with its suppliers overleaf, which reads as a category with
nothing in it β the opposite of what the page is saying. break-after on
the row pushes the heading over to sit with its own rows. */
.bg-table tr.bg-cat {
break-after: avoid;
page-break-after: avoid;
}
/* And keep a subtotal with the rows it totals, for the same reason. */
.bg-table tr.bg-subtotal {
break-before: avoid;
page-break-before: avoid;
}
.bg-table tr.bg-subtotal td {
background: #fdeaf3 !important;
color: #c31465 !important;
font-weight: 700;
}
/* ---- checklist ------------------------------------------------------ */
.task-row {
break-inside: avoid;
page-break-inside: avoid;
padding: 4px 0;
border-bottom: 1px solid #f5f0f2;
}
.task-group-head {
break-after: avoid;
page-break-after: avoid;
margin-top: 12px;
color: #1e3f7d !important;
}
/* A printed checklist wants a box to tick, not a rendered form control. */
.task-check input[type="checkbox"] { display: none !important; }
.task-check::before {
content: "";
display: inline-block;
width: 11px;
height: 11px;
margin-right: 7px;
border: 1.2px solid #6c6067;
border-radius: 2px;
vertical-align: -1px;
}
.task-row.is-done .task-check::before {
content: "\2713";
width: auto;
height: auto;
border: none;
font-weight: 700;
}
/* ---- cards ---------------------------------------------------------- */
.card, .ov-card, .wedding-card, .portal-supplier, .planner-card {
box-shadow: none !important;
border: 1px solid #ece5e8 !important;
background: #fff !important;
break-inside: avoid;
page-break-inside: avoid;
}
/* ---- section bands --------------------------------------------------- */
/* Three blocks on one page needed telling apart. Key details is pink,
arrivals teal, and the run sheet itself gets solid pink and white β it is
the reason the page is being printed, so it is the loudest thing on it. */
.print-band {
display: block;
margin: 16px 0 0;
padding: 5px 11px;
font-size: 9.5pt;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
break-after: avoid;
page-break-after: avoid;
}
.print-band-day {
background: #e8197a !important;
color: #fff !important;
}
/* The two panel headings become bands of the same shape, so the page reads
as three labelled blocks rather than one long scroll. */
/* Teal, to match the screen. Gee chose that treatment from four mockups on
27 Aug and only styles.css was changed, so the app showed a filled teal bar
and the PDF printed a pale pink one. She printed the sheet and said it
"doesn't look systematic, it doesn't look like there's a plan" β this block
was the loudest half of why. Nothing here changes the screen. */
.tl-header {
display: block;
margin: 10px 0 0;
padding: 5px 11px;
background: #007c85 !important;
border-left: none;
break-after: avoid;
page-break-after: avoid;
}
.tl-header h3 {
font-size: 11pt;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
color: #fff !important;
}
/* Blue on paper too, the same as the screen: the arrivals band and the key
details band are two different things and were printing as one. */
.tl-header-arrivals { background: #1e3f7d !important; }
/* The arrivals block used its own green on paper to be told apart from key
details. On screen the two have been one treatment since the teal bar, so
printing them differently is the mismatch, not the fix. */
/* ---- key details ----------------------------------------------------- */
/* The addresses. Somebody reads these out loud to a driver, so they get the
brand rule down the side and real weight β not the grey they inherited
from the screen, where the surrounding card was doing the work. */
/* The panels sit directly under their band and carry the same rule down the
side, so the colour tells you which block you are in. */
.tl-details {
border: 1px solid #007c85;
border-top: none;
border-radius: 0;
background: #fff !important;
padding: 5px 11px;
margin: 0;
break-inside: avoid;
page-break-inside: avoid;
}
/* π THREE COLUMNS, SO THE WHOLE TOP OF THE SHEET FITS PAGE ONE.
19 September, asked for twice.
The page box is 703 x 1009px. Masthead + key details + the arrival cards
came to 1,207px, so the arrivals block was cut in half every time. Her 14
fields go from 7 rows to 5 here, and the cards pack rather than grid
below β together that is 1,207 -> 992 on a supplier copy.
β οΈ NOTHING INSIDE A CARD CHANGES. She asked directly whether this would
cost her the coloured arrival times: it does not. This moves fields and
cards around and touches nothing in them.
β οΈ AND THE FOUR JOINS BELOW ARE PART OF IT β masthead 14 -> 9, band
16 -> 10, this padding 8 -> 5, blue band 22 -> 12. Without them the block
is still 22px over and the Photography strip is cut. They are white
space between blocks, never the room between actions on the run sheet,
which is `.tl-row` and stays where she set it. */
#tl-details {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
row-gap: 10px !important;
}
#tl-arrivals .tl-header { margin-top: 12px; }
/* 800, bigger and darker with the screen β these are the wordings Gee asked
to have bold, and on paper a mid teal at 7.5pt is the first thing to
disappear. */
.tl-detail .k {
color: #00565e;
font-size: 8.5pt;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
/* 600, matching the screen. Briefly 700 then 800 chasing the wrong half of
the panel; Gee meant the teal labels. Reverted at her ask. */
.tl-detail .v {
color: #2a2126;
font-size: 9.5pt;
font-weight: 600;
}
/* The confirmed absences, in the same red as the screen. This is the copy a
supplier is holding at the door, so it is the copy that matters most:
"Ceremony β None on the wedding day" has to be unmissable on paper, not
just on a monitor in the office.
!important because the two rules above set .k and .v colours flat, and
print.css has no cascade room to lose this one. */
.tl-detail.is-none .k,
.tl-detail.is-none .v { color: #ef0000 !important; }
/* ---- supplier arrivals ---------------------------------------------- */
/* The list you stand at a door holding. Time first and never orphaned from
the name β a supplier split across a page break at 8am is the one thing
this sheet exists to prevent. */
/* One column per door, however many doors this block still carries. It used
to be a fixed four β bride's, groom's, church, reception β but the church
and reception now live on their own cards inside the run sheet, so most
weddings show two or three doors here and a fixed grid left dead paper. */
/* TWO columns on paper, not four.
minmax(150px, 1fr) is right on a screen and wrong on A4. The usable width
is about 718px, so auto-fit took four columns of roughly 170px β and into
170px this has to fit a time chip plus "Signature Chauffeurs β Ash Β·
Family to Crown Promenade". Every name wrapped three or four times, five
cards deep. Gee, 28 Aug: "the problem is the supply arrival time section."
Two columns give about 350px each, which fits the longest real supplier
line on this wedding without wrapping at all.
The green frame goes too. It dates from when these were plain lists that
needed something to hold them together; the cards carry their own door
colours now, and a green box around a pink, a blue, a green and a plum
card is one border too many. */
/* π THE CARDS PACK, THEY DO NOT SIT IN A GRID. 19 September.
Gee, having printed it: *"I wanted you to fix the top section so that it
is easily visible on the printout β the key details and supply arrival
times on page 1."*
A 2x2 grid makes every row as tall as its tallest card. Her short Groom's
card (139px) sat beside the tall Bride's one (249px) and NOTHING was
allowed underneath it, so page one ended with about a third of it blank
and Church, Reception and Photography were orphaned onto page two.
Flowing them as columns lets a short card be short: 657px -> 569px.
β οΈ `break-inside: avoid` ON EACH CARD IS LOAD-BEARING. Without it a
column splits a door's list across the gap, which is worse than the page
break this exists to cure.
β οΈ AND `is-wide` NEEDS `column-span`, NOT `grid-column`. `grid-column`
means nothing outside a grid, so Photography would silently become a
narrow card in the flow. */
.arrivals-groups {
display: block;
columns: 2;
column-gap: 14px;
border: none;
padding: 2px 0 0;
}
.arrivals-groups .arrivals-group {
display: block;
margin: 0 0 8px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
.arrivals-groups .arrivals-group.is-wide { column-span: all; margin-top: 4px; }
/* Elsewhere is the catch-all β a family drop at a hotel across town. One
line under the four, not a fifth column for a single name. Marked by the
builder now: counting to five made a third door full-width on a wedding
that only had three. */
.arrivals-group.is-wide {
/* column-span lives on the flow rule above; this keeps the divider. */
border-top: 1px solid #cfe9de;
padding-top: 4px;
}
/* β οΈ THE POINT OF THE THREE-DOOR SPLIT IS THIS PAGE. Two columns here, so a
wedding with no ceremony printed as bride | groom and then the reception
alone on row two β the LONGEST of the three lists β with an empty half-page
beside it. Gee: "so it looks better on the PDF when we print it."
The widened card now runs the full width and reads down two columns, which
also keeps it off a second sheet. */
/* The rule above belongs to Elsewhere, which is a different kind of block and
earns a divider. A widened door is still one of the doors. */
.arrivals-group.is-wide.is-split { border-top: none; padding-top: 0; }
.arrivals-group.is-split .arr-card-list {
columns: 2;
column-gap: 16px;
}
.arrivals-group.is-split .arr-card-list li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.arrivals-group {
break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 9px;
}
.arrivals-group h4 {
margin: 0 0 3px;
padding-bottom: 2px;
border-bottom: 1px solid #9fe1cb;
font-size: 7.5pt;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: #0f6e56;
}
.arrivals { border-top: none; }
/* Hanging indent, so a wrapped line cannot be mistaken for a new arrival.
On Tiffany & Liam's sheet "8:30am HD Event Styling β Derya Bride's house"
wrapped, and the word "house" landed hard against the left margin in the
same column as the times β reading, at a glance, like another supplier
turning up. The first line still starts at the margin with the time; every
line after it tucks in under the name. */
.arrivals li {
display: block;
padding: 1.5px 0 1.5px 46px;
text-indent: -46px;
border: none;
break-inside: avoid;
page-break-inside: avoid;
}
/* The driver line is its own block inside that indent, so it sits under the
supplier rather than hanging off the left edge. */
.arrivals li .arr-driver { text-indent: 0; }
.arr-note { color: #a0949a; font-size: 7pt; }
/* The number that actually reaches the car at midnight. Prints on its own
line so it can be read out; red and highlighted when it is still TBC,
because an unknown driver the day before is a phone call to make. */
.arr-driver {
display: block;
font-size: 7.5pt;
font-weight: 700;
color: #2a2126;
}
.arr-driver.is-tbc {
color: #b3001b !important;
background: #ffe0e3 !important;
padding: 0 3px;
}
/* Not confirmed yet, and saying so out loud. These used to be left off the
sheet entirely, which read as "nobody else is coming". Red, so it is the
thing your eye lands on before you leave the house. */
.arrivals li.is-tbc .arr-time {
color: #b3001b;
font-weight: 700;
letter-spacing: .04em;
}
.arrivals li.is-tbc .arr-name { color: #6c6067; }
/* Time and name on one line β the heading already says where, and Key
details above carries every address in full. Repeating "10 Fairbairn Way,
Caroline Springs VIC 3023" eight times was most of what made this a page. */
.arr-time { font-weight: 700; font-size: 8pt; margin-right: 4px; }
.arr-name { font-size: 8pt; }
/* Only Elsewhere shows a place, because only Elsewhere has no heading. */
/* β οΈ margin-left, because there was NONE and the two ran together. On her
printed card *"Crown Promenade"* butted straight against *"Crown
Promenade β Southbank"* with a 0px gap, and so did *"NGV photo location
and anywhere else"* against *"National Gallery of Victoria"*. Gee: *"there
are some that are overlapping on top of each other, which is not good."*
Measured: the only two 0px pairs in the whole document. 19 September. */
.arr-role { font-size: 7pt; color: #6c6067; margin-left: 6px; }
.arr-next {
display: inline-block;
margin-left: 5px;
font-size: 7pt;
font-weight: 700;
letter-spacing: 0;
text-transform: none; /* "Next Day", her capitals (CHECK 233) */
color: #d4121f;
}
/* The person under the business name, on the supplier table. */
.sup-person { display: block; font-size: 8.5pt; color: #6c6067; }
/* ---- the checklist, which had no print rules at all ------------------
It came out as a screen dump: tick boxes, stars, hover-only buttons and
a comment icon per row, none of which mean anything on paper. What a
printed checklist is FOR is reading down it away from a screen and
ticking things with a pen β so the box becomes a box you can write in,
and everything that was a control disappears. */
/* The swap. On screen the checklist groups by phase or by person; on paper
it groups by the month things fall due, which is the question you are
actually holding the sheet to answer. Both blocks are always in the DOM
and exactly one of them is ever visible. */
#task-groups { display: none !important; }
#task-print { display: block !important; }
/* The four rules that styled the old .task-group / .task-list print markup
lived here. They are DELETED rather than left behind: the print block is
a tp-* table now, so they matched nothing, and a rule that matches
nothing is the thing that makes the next person debugging this file
believe they have found the answer. See the tp-* block at the end of this
file for what actually styles the printed checklist. */
/* FLEX, not grid. This was a three-column grid and it destroyed the page:
a row has a VARIABLE number of assignee pills β none, one, or several β
so positional columns put whatever happened to be third into the 92px
date column. On Tiffany & Liam's checklist the task title landed there
and printed one or two letters per line down the left edge, while the
assignee pill stretched into an empty bar across the middle.
Flex is what the screen already uses, and it copes with a row having
three children or six. */
.task-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 5px 0;
border: none;
border-bottom: 1px solid #f5f0f2;
border-radius: 0;
break-inside: avoid;
page-break-inside: avoid;
}
/* The title and notes take whatever room is left; min-width:0 is what lets
a long title wrap normally instead of forcing the row wider. */
.task-main { flex: 1 1 auto; min-width: 0; }
/* Fixed and right-aligned so the dates form a column you can scan down.
β οΈ Screen moved the date FIRST on 22 Oct (CHECK 238); paper keeps it last. */
.task-row > .row-when { order: 7; display: block; flex: 0 0 76px; width: 76px;
margin: 0; text-align: right; }
.row-when > .task-due { text-align: right; }
.task-due {
flex: 0 0 76px;
text-align: right;
white-space: nowrap;
}
/* Who it is for, small and quiet β it is a label, not a heading. */
.who-name {
flex: 0 0 auto;
padding: 0 6px;
border: 1px solid #ece5e8;
border-radius: 999px;
font-size: 7.5pt;
white-space: nowrap;
}
.who-name.is-empty { display: none; }
/* A real square to tick, rather than a browser checkbox rendered grey. */
.task-check {
flex: 0 0 12px;
appearance: none;
-webkit-appearance: none;
width: 12px;
height: 12px;
margin: 0;
border: 1px solid #2a2126 !important;
border-radius: 2px;
background: #fff !important;
}
.task-check:checked::after {
content: 'β';
display: block;
margin-top: -3px;
font-size: 11pt;
line-height: 1;
text-align: center;
}
/* Stars, comment flags, file clips and the drag gutter are all screen. */
.task-star, .comment-flag, .vis-tag, .client-tag,
.task-actions, .row-gutter, .who-name.is-empty { display: none !important; }
.task-title { font-size: 9.5pt; }
.task-notes, .task-meta { font-size: 8pt; color: #6c6067; }
.task-due { font-size: 8.5pt; text-align: right; white-space: nowrap; }
.task-due.is-overdue { font-weight: 700; color: #b3001b !important; }
/* A finished task stays on the page β struck through rather than removed,
because "what has already been done" is half of what a printed checklist
is being carried around to answer. */
.task-row.is-done .task-title { text-decoration: line-through; color: #a0949a; }
/* No colour here on purpose. The rule higher up this file already sets
#1e3f7d !important, so a colour declared here never applied β it just sat
in the file claiming the headings were pink while they printed blue. Blue
is the right answer anyway: it matches the budget's category headings, so
"a heading that groups rows" looks the same across every document. */
.task-group-head {
break-after: avoid;
margin-top: 12px;
font-size: 9pt;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
/* The couple's answer prints. It is the content the task was asking for,
and a printed checklist without it is a list of questions. */
.client-answer {
margin: 4px 0 2px;
padding: 5px 8px;
border-left: 2px solid var(--teal-deep);
background: var(--teal-tint) !important;
break-inside: avoid;
}
.client-answer-head { font-size: 7pt; color: var(--teal-deep); }
.client-answer-body {
max-height: none; /* the screen scrolls it; paper cannot */
overflow: visible;
font-size: 8.5pt;
white-space: pre-wrap;
}
/* ---- the budget ------------------------------------------------------
Thirteen columns will not fit on a portrait page and never could. Bank
details go, because a printout is the last place a BSB should live, and
because the columns that matter on paper are what it costs and what is
left to pay. */
.bg-target { break-inside: avoid; border: 1px solid #ece5e8; padding: 8px 10px; }
.bg-target-bar { height: 8px; }
.bg-target-value { font-size: 12pt; }
.bg-table .bg-bank,
.bg-table .bg-clip,
.bg-thread,
.bg-instalments .ins-due { display: none !important; }
/* "Deposit paid Β· Final balance owing" under the status pill. On screen it
is a helpful second line; in a printed table it sets the column's minimum
width and shoved Status clean off the right-hand edge, taking the first
character of every due date with it β the header printed as "]UE DATE".
The pill alone says enough on paper. */
.bg-table .status-detail { display: none !important; }
/* A long supplier name should wrap rather than widen the whole table. */
.bg-table .bg-name,
.bg-table .bg-supplier { word-break: break-word; }
/* Paid instalments stay β on paper they are the receipt. */
.bg-instalments td { font-size: 7.5pt; padding: 0 10px 4px; }
.bg-table { font-size: 8.5pt; }
.bg-table th, .bg-table td { padding: 4px 6px; }
.bg-table tr { break-inside: avoid; }
.bg-table .status {
border: 1px solid #a0949a !important;
background: none !important;
font-size: 7pt;
}
/* ---- the supplier copy ----------------------------------------------
Set by printing.js when Gee answers "a supplier" β see the modal in
index.html. Everything below is about what a supplier does NOT need and
should NOT be handed.
Gee, 30 Aug: "I would much rather have that on my running sheet only when
I print as a PDF, but not what I send as a PDF to the suppliers. They're
just going to get so confused and overwhelmed with that."
NOTHING here is deleted, moved, or turned off on screen. It is the same
run sheet, printed shorter β every supplier still has their own line, in
time order, exactly where their moment falls in the day. */
/* The cards placed down the sheet. NOT the block at the top.
I dropped the top block from the supplier copy as well, reasoning that it
names every supplier at every door more loudly than the cards do. Gee
printed one and overruled it: "it is missing the supplier arrival times in
the key β this is the key that should be there on both pdfs in print mode
for the running sheet timeline."
She is right, and it makes the feature honest about what it is. This was
never a privacy screen β it is about not printing the same list twice. The
supplier standing at a door needs to know who else is coming to that door;
what they do not need is that list again, a second time, halfway down the
page. So the block stays on both copies and the repeats come off.
Scoped to .tl-row, and that matters: the block at the top is built from
.arr-card too. A bare `.arr-card { display: none }` would have emptied the
block she just asked to keep, and the heading would have printed above
nothing. The whole row goes rather than the card inside it, because with
the card gone the row is an empty heading. */
/* π 17 SEPTEMBER: GEE REVERSED THIS, TWICE, AND THE RULE IS NOW OFF.
"I want them shown for Gee What a Wedding and for Supplier."
I pushed back once, because the block at the top already prints on a
supplier copy and I thought that was the thing she had found missing.
MEASURED before touching anything, with the print stylesheet forced on
screen β she was already getting the top block:
her copy top block 4 cards / 28 names Β· 5 inline cards Β· 72 rows
supplier copy top block 4 cards / 28 names Β· 0 inline cards Β· 67 rows
So the only difference was the five repeats in the day, and she asked for
them anyway. Her sheet, her call β and the "don't print the same list
twice" reasoning was mine, not hers.
β οΈ THE TWO RULES BELOW STAY, AND THEY ARE NOT THE SAME KIND OF THING.
`.arr-driver` is somebody's mobile number and `.is-private-note` is a note
she wrote to herself. Those were never about clutter, so they are not
hers to have reversed by this.
β οΈ AND THIS CHANGES NOTHING ON A ONE-SUPPLIER COPY. `[data-print-one]`
hides every row that is not theirs, so an arrival card for a door they do
not attend is still gone. Verified, not assumed.
[data-print-for="supplier"] .tl-row .arr-card { display: none !important; } */
/* Somebody else's driver and their mobile number. This one is not about
clutter β it is a private phone number going out in an email to a person
with no reason to hold it. Gone regardless of anything else. */
[data-print-for="supplier"] .arr-driver { display: none !important; }
/* Notes you marked private. The tick is per note, so "unplugged ceremony"
still prints and "will need to buy candles" does not. */
[data-print-for="supplier"] .is-private-note { display: none !important; }
/* π A LINE SET TO "PLANNER ONLY" NEVER PRINTS ON A SUPPLIER COPY, arrival
cards included. Gee, 13 October, on Tiffany's Planner-only "Supplier
arrivals Β· Bride's home" card printing on the supplier copy: "If it's
planner only, it should not actually print on their sheet, but if I've
got everyone, then yes." Her per-line setting decides, whatever the
screen's Hide / Keep-the-arrival-cards switches say. Her own copy ("Me")
has no data-print-for and prints everything, as before. CHECK 155. */
[data-print-for="supplier"] .tl-row.is-planner-only { display: none !important; }
/* Was: an arrivals line whose card is hidden would print as a bare heading
with nothing under it. The card is no longer hidden β see above β so this
would now remove the very rows she asked to keep.
[data-print-for="supplier"] .tl-row.is-arrivals { display: none !important; } */
/* ---- THE TWO BLOCKS THAT WERE MISSED, and they were the worst two -------
Found 7 Sep from the Melbourne Cake Studio copy Gee printed on the 4th.
The rules above strip the INLINE arrival cards β the ones sitting in the
day β and every one of them worked. But the run sheet carries two more
blocks ABOVE the day, and neither was ever scoped to the supplier copy:
#tl-arrivals SUPPLIER ARRIVAL TIMES β every venue, every arrival. On
Tiffany & Liam that is thirteen arrivals across two
houses, naming eleven other companies and when they turn
up. The cake studio needs their own time, not everybody's.
#tl-phones WHO TO RING ON THE DAY β fifteen suppliers with their
MOBILE NUMBERS. This is the same fault as .arr-driver
above, at fifteen times the scale, and it is the reason
this is a correctness fix and not a tidy-up: it is other
people's private numbers going out in an email to someone
with no reason to hold them.
`drawTheirArrival()` already puts their own arrival back in .tl-yours, so
hiding the block costs them nothing they need. Gee, 7 Sep, looking at the
printed copy: "Everything's coming up, so I don't understand what we're
trying to achieve there." Exactly right.
β οΈ 8 SEPTEMBER: #tl-arrivals COMES BACK. #tl-phones DOES NOT.
Gee, the next day: "I want the full arrival of every supplier there, and
then I want the key details, the supplier arrivals, and then theirs."
That reverses half of the note above, and only half. The two blocks were
hidden by one rule and they are not the same thing:
#tl-arrivals WHO IS COMING AND WHEN. Names, times, places. A caterer
who can see the florist is in at 2pm can work around them,
which is the argument she is making. No phone numbers β
.arr-driver above strips the drivers regardless, and it
still does.
#tl-phones FIFTEEN SUPPLIERS' MOBILE NUMBERS. Not clutter, and not
hers to hand out: other people's private numbers, going by
email to somebody with no reason to hold them. She has not
asked for this one, and it is not covered by "the full
arrival of every supplier".
So the rule is split rather than deleted.
β οΈ AND IT IS NOW HER CHOICE, not a rule. Gee, minutes later: "with the who
to ring on a wedding day, can I choose to have that hidden or not hidden?"
A tick on the print dialog decides it, and `data-print-phones` is set only
when she ticks it β so the ABSENCE of the attribute is the safe state, and
anything that goes wrong (a stale flag, a failed read, a cancelled print)
fails towards hiding fifteen private mobile numbers rather than towards
sending them. The tick is cleared every time the dialog opens: a preference
that remembers itself is one you stop seeing. */
[data-print-for="supplier"]:not([data-print-phones]) #tl-phones {
display: none !important;
}
/* π AND THE SAME RULE FOR THE THREE NUMBERS IN KEY DETAILS β 21 September.
THIS SELECTOR IS THE WHOLE REASON THAT STRIP EXISTS AS ITS OWN BLOCK
RATHER THAN AS THREE MORE `.tl-detail` ROWS.
Gee asked for the bride's, the groom's and her own number somewhere always
visible, and named Key details. Key details is right for her β it never
collapses β but it PRINTS ON EVERY SUPPLIER COPY with no tick of its own.
Three plain rows would have walked the couple's mobiles straight past the
guard immediately above, on every sheet, unasked.
So it obeys the tick the phone list already obeys. Same attribute, same
fail-safe direction: the ABSENCE of `data-print-phones` hides it, so a
stale flag, a cancelled print or a Ctrl+P all fail towards keeping the
couple's mobiles in the building.
β οΈ ON HER OWN COPY IT ALWAYS PRINTS β `data-print-for` is only ever set
for a supplier, so her sheet is unchanged in every case.
π REVERSED 21 OCTOBER, BY HER. Tiffany & Liam's supplier PDF came out with
only the venue's number in the gold strip. Gee: "If I've opted to have that
strip and that information there, that information should be there
regardless. It should always show." β¦ "I want the same reasoning
throughout the whole app." So the strip prints in full on EVERY copy, and
the tick now decides only #tl-phones (the long "Who to ring" list) above.
The rule that hid it is gone, not commented out. CHECK 223. */
/* Anything hidden on screen stays hidden on paper. */
[hidden] { display: none !important; }
}
/* ===========================================================================
ONE SUPPLIER'S OWN COPY. 3 September.
Gee: "Aisle Planner has a thing where we can download or create a running
sheet that only concerns that supplier and where they are and what they're
doing⦠it would be good for them to see the key details and then the
supplier arrival times. The running sheet can then be filtered."
β οΈ IT IS THE SAME SHEET, MARKED UP β not a second document. printing.js tags
the rows that are theirs and these rules quieten the rest. Rebuilding it
would create a second thing to keep in step with the first, and the whole
reason this run sheet can be trusted is that there is ONE order and
everything reads it.
THE REST OF THE DAY STAYS, faded, showing its time and title only. She chose
this over their lines alone, and the example is the reason: a cake arriving
at 7:45 pm lands in the middle of entrΓ©e service. A sheet holding only their
two lines cannot tell them that. The faded lines are never their job β they
are the wall they are working against.
=========================================================================== */
@media print {
/* β οΈ HIDDEN, NOT GREYED β CHANGED 8 SEPTEMBER, AND IT REVERSES AN EARLIER
DECISION ON PURPOSE.
This block used to keep every other line on the page, greyed, with the
reasoning that hiding it is "the they-don't-know-what-they're-working-
around failure". Gee printed one and could not tell it apart from the full
sheet: "the printing version of just that supplier means jack shit. It's
doing nothing." Then, asked directly: "do the supplier PDF hide the other
lines⦠just have their information in there."
Faint grey on paper is not a distinction. Her call, and it is the right
one for the thing a supplier actually holds on the day. */
[data-print-one] .tl-row:not(.is-theirs):not(.is-theirs-section) {
display: none !important;
}
/* Nothing to contrast against any more, so the rule and the bold go too β
every line on the page is theirs. "Just clean it" was the brief. */
[data-print-one] .tl-row.is-theirs { color: #000; }
/* THE SECTION HEADINGS STAY, and they are the reason this is not simply a
list of times. A heading is not another supplier's information β it is
which stretch of the day they are standing in. markOneSupplier marks only
the headings that actually introduce one of their lines, so a supplier who
is never at the church does not get a CHURCH heading with nothing under
it. */
[data-print-one] .tl-row.is-heading.is-theirs-section { color: #000; }
/* π THE SUPPLIER'S OWN NAME STAYS. 18 September, and this REVERSES the rule
that used to sit here.
It said: *"Their own name is on every line of their own sheet, which is a
chip saying something they already know."* That was my reasoning, never
hers, and it was wrong in the way that costs her work.
Gee: *"I don't like that when I select the supplier, only the tags for
that supplier are not showing below. This is then making it very
challenging to have to reamend and type the body of all of the
descriptions, which I don't want to do."*
β οΈ AND THE PROOF WAS ALREADY IN HER DATA BEFORE SHE SAID IT. HD Event
Styling's four lines had been retyped by hand to carry the name in the
TITLE β "HD Events delivers florals to Bride", "HD Events styling
commences @ Metropolis" β where the PDF she printed at 5:18 pm still read
"Florist arrives @ Bride's house". She was writing the chip back into the
words because the chip was gone. **A rule that makes her retype her own
run sheet is not a tidy-up, it is a tax**, and it would have been paid on
every one of the ~30 weddings still to come.
β οΈ ON A SHARED LINE THE CO-SUPPLIER'S NAME COMES BACK TOO, and that is
correct rather than a leak. Measured on Tiffany: 20 suppliers are named on
the sheet, 3 of them share a line β DJ Goran Mangal with Technical Events
and Active Draping. Knowing who else is on your line is the point of
standing at that door, and the arrivals block above already names all 20
on every supplier copy anyway.
Nothing replaces this rule. Other suppliers' LINES are still gone β that
is `[data-print-one] .tl-row:not(.is-theirs)` further up, and it is
untouched. */
/* ---- their own arrival, between key details and the sheet ---- */
.tl-yours {
margin: 0 0 10pt;
padding: 7pt 9pt;
border: 0.75pt solid #000;
border-radius: 3pt;
break-inside: avoid;
}
.tl-yours .ty-head {
margin: 0 0 4pt;
font-size: 8pt;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.tl-yours .ty-row {
display: flex;
gap: 10pt;
font-size: 9.5pt;
line-height: 1.5;
}
.tl-yours .ty-when { font-weight: 700; white-space: nowrap; }
/* The supplier's own arrival, when Gee has marked it unsettled β 133.
Inline here, not the block it is inside an arrival chip: this is a single
nowrap line on their sheet, and a block would push the time onto its own
row and break the alignment of every stop under it. */
.tl-yours .ty-when .arr-tbc { display: inline; margin-left: 4px; }
.tl-yours .ty-what em { font-style: normal; color: #555; }
}
@media print {
/* The duration prints. On the day this is the sheet in her hand, and "how
long have I got" is the question it exists to answer. */
.tl-dur {
display: block;
font-size: 7.5pt;
font-weight: 700;
color: #6c6067 !important;
white-space: nowrap;
}
}
/* ===========================================================================
THE PRINTED CHECKLIST β third attempt, and a table this time. 2 September.
Kadija: "when I try to print the checklist it just comes out as a PDF with
dates, without the tasks themselves." Gee sent the PDF and it is precisely
that: every month heading, every date, and four titles out of about fifty β
with the dates printing down the LEFT, where the title belongs.
It was a three-column grid, which put whatever happened to be third into the
date column. It became flex on 26 August, and flex drops the title instead.
Both failures share a cause: a row whose children VARY in number β none, one
or several assignee pills β cannot be laid out by a rule that assumes a
fixed shape, and print has no hover, no scroll and no second chance to
reveal what it swallowed.
Table cells cannot collapse into each other, cannot be reordered by a stray
`order`, and cannot overlap. Its own tp-* class names so no screen rule and
no earlier print override can reach it.
=========================================================================== */
@media print {
.tp-group { break-inside: auto; margin-top: 14px; }
.tp-group:first-child { margin-top: 0; }
.tp-month {
font-size: 10pt;
font-weight: 700;
margin: 0 0 4px;
padding-bottom: 3px;
border-bottom: 1px solid #ece5e8;
}
.tp-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* the columns are ours, not the content's */
}
.tp-row { break-inside: avoid; page-break-inside: avoid; }
.tp-row > td { border-bottom: 1px solid #f5f0f2; padding: 4px 0; vertical-align: top; }
/* Narrow, fixed, and first β a tick box that grows would eat the title. */
.tp-box { width: 16px; font-size: 10pt; line-height: 1.2; color: #6c6067; }
/* Everything left over. The one column allowed to wrap. */
.tp-title { font-size: 9.5pt; line-height: 1.35; word-break: break-word; padding-left: 6px; }
/* On its own line under the title rather than beside it: a name beside a
title is what pushed the title into the date column in both earlier
versions. */
.tp-who { display: block; font-size: 8pt; color: #6c6067; }
.tp-due {
width: 78px;
font-size: 8.5pt;
text-align: right;
white-space: nowrap;
color: #6c6067;
}
.tp-due.is-overdue { font-weight: 700; color: #b3001b; }
.tp-row.is-done .tp-title { text-decoration: line-through; color: #a0949a; }
}
/* ===========================================================================
THE SUPPLIER TEAM SHEET SHE CAN ACTUALLY SEND β 18 September.
Gee: "the suppliers have all of the BSB, the account numbers, the payments
and everything like that linked to it. I just want to be able to print the
supplier details with just the role on this wedding, the supplier, which
venue, phone number, email, Instagram and website⦠It is fine without
showing any of the payment amounts, so then I can use that to send it to
suppliers."
π NO NEW DOCUMENT AND NO NEW BUTTON. The Suppliers tab already prints as
"Supplier Team" and the table already has all seven of her columns. The
only thing wrong with it was the three columns she does not want a
supplier reading. `check-whether-it-already-exists`.
π AND NO NEW TICK EITHER, BECAUSE THE QUESTION IS ALREADY ASKED. Pressing
Print opens "Who is this for?". Choosing a supplier is her saying this copy
is leaving the building, so the money comes off on its own β the same way
that answer already takes off the driver mobiles and her private notes.
`derive-it-do-not-tick-it`.
β οΈ THE HEADER AND THE CELLS, ALWAYS AS A PAIR. A ` ` hidden without its
` ` shifts every column after it by one, which is the kind of fault that
looks like a data error. That is why `sup-owing-col` was added to the
header in index.html to match `sup-owing` on the cells β the same pairing
`hide-progress` already uses.
β οΈ COVERAGE AND PROGRESS GO TOO. They are her working notes on how far
along a booking is; "Where they're up to" on a sheet handed to that very
supplier is nobody's idea of a good afternoon. They are usually hidden by
`hide-progress` anyway β this makes it certain when she has that toggle on.
β οΈ HER OWN COPY IS UNTOUCHED. No `data-print-for` means "Me", and she keeps
every column. Checked: the table carries no BSB or account number at all β
those live on the contact card, which does not print from this tab.
=========================================================================== */
/* β οΈ THE OWING HEADER IS HIDDEN TWICE, AND THE SECOND ONE IS NOT BELT AND
BRACES. `index.html` is in the service worker's SHELL and is the slowest
file in this app to reach her browser β measured repeatedly on 18 September,
and measured again on this very change: the ` ` was
served and still not in her loaded page. For as long as her page holds the
old markup, `sup-owing-col` does not exist on that header, so the cells
below it vanish and the header stays: Phone prints under "Owing", Email
under "Phone", and every column after it is one out. That is a wrong
document going to a supplier, not a cosmetic lag she can wait out.
`Owing` is the only `th.num` in this table, so the second selector hides it
on the old markup and the new one alike, with no hard refresh needed.
β οΈ AND THE COMMENT SITS ABOVE THE RULE, NOT INSIDE THE SELECTOR LIST.
A comment written between two selectors cost a working day earlier today β
the parser dropped every selector after it and the rule looked deliberate. */
@media print {
/* Coverage is not one of the choosable columns, so it keeps the rule it has
always had: off a supplier's copy, on hers. Leaving it alone is what keeps
her own printout identical to yesterday's. */
[data-print-for="supplier"] .sup-cover-col,
[data-print-for="supplier"] .sup-cover { display: none !important; }
}
/* ===========================================================================
WHICH COLUMNS GO ON A SUPPLIER'S COPY. 18 September.
Gee: "Can you do it so that I can select what I want to show and what I
don't want to show, and then be able to upload it via PDF and Excel β so I
don't have to constantly keep deleting things if I don't need that
information?"
π A VIEW FILTER, AND ONLY THAT. She stopped the work to say it: "I'm only
wanting this for the view only⦠all the details that are inside the full
supplier list are connected to the running sheet and the budget. That must
stay the way it is." Nothing below reads or writes data. It decides which
cells are drawn on one printed page.
β οΈ IT APPLIES TO A SUPPLIER'S COPY ONLY. Her own printout is untouched and
still carries everything, exactly as it did this morning β which is why
every selector here is qualified with `[data-print-for="supplier"]`.
β οΈ AND THE DEFAULT IS THE SAME SEVEN THIS MORNING'S RULE PRODUCED, so a
supplier copy printed before she ever opens the chooser is identical to
what it was. A new control that quietly changes an existing printout is
indistinguishable from a bug.
How it works: `sheetcolumns.js` writes her ticks onto as
`data-sup-cols="role name venue β¦"`, and `~=` matches one word of that
list. Hide them all, then let the ticked ones back.
=========================================================================== */
@media print {
[data-print-for="supplier"] .sup-table .sup-col { display: none !important; }
/* Specificity: two attributes on plus the class beats the one
attribute plus the class above, so these win wherever they apply. */
[data-sup-cols~="role"][data-print-for="supplier"] .sup-table .sup-c-role,
[data-sup-cols~="name"][data-print-for="supplier"] .sup-table .sup-c-name,
[data-sup-cols~="person"][data-print-for="supplier"] .sup-table .sup-c-person,
[data-sup-cols~="phone"][data-print-for="supplier"] .sup-table .sup-c-phone,
[data-sup-cols~="email"][data-print-for="supplier"] .sup-table .sup-c-email,
[data-sup-cols~="insta"][data-print-for="supplier"] .sup-table .sup-c-insta,
[data-sup-cols~="website"][data-print-for="supplier"] .sup-table .sup-c-website,
[data-sup-cols~="venue"][data-print-for="supplier"] .sup-table .sup-c-venue,
[data-sup-cols~="arrives"][data-print-for="supplier"] .sup-table .sup-c-arrives,
[data-sup-cols~="hours"][data-print-for="supplier"] .sup-table .sup-c-hours,
[data-sup-cols~="driver"][data-print-for="supplier"] .sup-table .sup-c-driver,
[data-sup-cols~="drivermob"][data-print-for="supplier"] .sup-table .sup-c-drivermob,
[data-sup-cols~="owing"][data-print-for="supplier"] .sup-table .sup-c-owing,
[data-sup-cols~="inbudget"][data-print-for="supplier"] .sup-table .sup-c-inbudget,
[data-sup-cols~="progress"][data-print-for="supplier"] .sup-table .sup-c-progress,
[data-sup-cols~="notes"][data-print-for="supplier"] .sup-table .sup-c-notes {
display: table-cell !important;
}
}
/* ===========================================================================
A SUPPLIER'S COPY IS A SHORT DOCUMENT, AND THE ROOM I ADDED THIS MORNING
WAS FOR A LONG ONE. 18 September.
Gee, looking at HD Event Styling's copy: *"Can you see how disgusting that
looks when I'm doing a supplier-only view."* Then, after four abstract
options she did not want: *"You didn't give me a proper view, and the
options were terrible⦠we have got to fix that now so it doesn't look so
shit on the page."*
π THE CAUSE IS MINE, FROM THIS MORNING. She asked for breathing room on
HER run sheet β 71 lines, genuinely a wall β and I widened `.tl-row`,
`.tl-notes`, the headings and `.arr-card-list li` GLOBALLY. Every one of
those rules is inherited by the supplier copy, where there is no density to
fix, so it is pure air. Measured on HD's copy with the print stylesheet
forced on screen:
masthead 75px
key details 129px
their own arrival 114px
everyone's arrivals 753px β 30 names at 4px padding each
the day (4 lines) 666px β 121px PER LINE, for a one-line entry
ββββββββββββββββββββββββββββ
total ~1,737px Β· an A4 content box is ~1,032px
Four lines over three pages, and about 500px of it added this morning.
β οΈ NOTHING IS REMOVED HERE, AND THAT IS DELIBERATE. Every block above stays
on the page. The arrivals block in particular is hers by an explicit
decision on 8 September β *"I want the full arrival of every supplier
there"* β and this does not touch what it says, only how tightly it sits.
`a-view-filter-is-not-a-data-change`, one step further: this is not even a
filter, it is spacing.
β οΈ AND HER OWN COPY IS UNTOUCHED. Every selector below is prefixed with
`[data-print-for="supplier"]`, which `printing.js` sets on `` only
when she answers "a supplier". Print it for herself and she gets the exact
sheet she approved at 3pm, to the pixel.
β οΈ THE VALUES ARE THE OLD ONES, NOT NEW ONES. Each line below restores what
that rule said before this morning, so a supplier's copy is what it was
yesterday rather than a third design nobody has seen. The one exception is
the hairline: #ded2d7 stays, because that was about CONTRAST, not space, and
it costs no height.
=========================================================================== */
@media print {
/* β οΈ `html[...]`, NOT `[...] html`. The attribute IS on `` β it has no
ancestor to be a descendant of, so the descendant form matches nothing and
the line-height would have stayed 1.5 while every other rule below worked.
A selector that quietly matches nothing is the hardest kind to notice,
because the page still looks better. */
/* π LOOSENED AGAIN, LATER THE SAME NIGHT β AND THESE NUMBERS ARE A CEILING,
NOT A PREFERENCE.
Gee, after printing the supplier copy: *"the running sheet needs more
space because it's just too squashed up still. Still needs some more
padding."* Fair β I had scoped the afternoon's breathing room off the
supplier copy ENTIRELY, which took it back to yesterday's density rather
than to something in between.
β οΈ SO WHY NOT SIMPLY HER OWN COPY'S VALUES? Because the same stylesheet
prints two very different documents, and they pull opposite ways.
Measured at the real A4 box on both, the same hour:
full supplier copy HD's one-supplier copy
as it printed 7 pages 2 pages
THESE VALUES (8/12) 8 pages 2 pages β shipped
11 / 16 9 pages 3 pages
her own copy (16/20) 10 pages 3 pages
Anything past this puts HD's four-line sheet back onto three pages, which
is the exact thing she complained about this afternoon. **8px and 12px is
the most room available before that happens.** Rows go 80px β 90px.
β οΈ IF SHE ASKS FOR MORE AGAIN, THE ANSWER IS NOT A BIGGER NUMBER HERE β
it is to let a short sheet keep the tight values and a long one breathe,
which needs a rule that knows how many lines it is printing. Do not just
nudge these and hand her three pages again.
Her own copy is untouched by every line below. */
html[data-print-for="supplier"],
[data-print-for="supplier"] body { line-height: 1.45; }
/* Was gap 20px / padding 16px 0 on her copy; 10/5 here until tonight.
π AND THE PADDING IS GONE FROM HERE, 19 SEPTEMBER β one number for both
copies, and it lives on `.tl-row` above. The column gap stays: that is
horizontal and has nothing to do with the room between actions. */
[data-print-for="supplier"] .tl-row {
gap: 12px;
}
[data-print-for="supplier"] .tl-notes {
margin-top: 5px;
line-height: 1.5;
}
[data-print-for="supplier"] .tl-who { margin-top: 4px; }
[data-print-for="supplier"] .tl-row.is-heading {
padding: 3px 12px; /* 5px -> 3px, SLIM, 26 September */
margin: 24px 0 8px;
}
[data-print-for="supplier"] .tl-row.is-text {
padding: 8px 12px;
margin: 10px 0;
}
/* Thirty names on HD's copy, so each pixel here is ~30 down the page. 2px is
what the ceiling above allows; 3px alone costs HD a third page. */
[data-print-for="supplier"] .arr-card-list li { padding: 2px 0; }
}
/* THE BLUE BAR ON PAPER β the run sheet's own arrivals boxes only (`.is-bar`),
26 September. The SUPPLIER ARRIVAL TIMES block at the top keeps its print
rules untouched. print-color-adjust is exact for this sheet, so the fill
prints.
β οΈ HEIGHT-NEUTRAL: the old box was 6px padding + a 9pt head + 3px + list +
6px; this is a 3px/3px bar + the list padded 3px/5px. Her first page closed
at 999 of 1,009 on 19 September by shaving these boxes. */
@media print {
.arr-card.is-bar {
border: 1px solid #0067a3;
border-radius: 5px;
overflow: hidden;
padding: 0;
}
.arr-card.is-bar .arr-card-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 6px;
margin: 0;
padding: 3px 10px;
background: #0067a3 !important;
color: #fff;
line-height: 1.25;
}
.arr-card.is-bar .arr-card-icon { font-size: 8.5pt; }
.arr-card.is-bar .arr-card-label { font-size: 7.5pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.arr-card.is-bar .arr-card-place,
.arr-card.is-bar .arr-card-count {
padding: 0 6px;
border-radius: 999px;
background: #fff !important;
font-size: 7.5pt;
font-weight: 800;
}
.arr-card.is-bar .arr-card-place { color: #c31465; }
.arr-card.is-bar .arr-card-count { color: #0067a3; }
.arr-card.is-bar .arr-card-list { padding: 3px 10px 5px; }
/* π A ROW WITH A TBC OR NEXT DAY TAG PRINTED AS THREE LINES. Gee,
29 September, holding Tiffany & Liam's printed sheet: "it looks very
funny on the printout". "8:15am", then "TBC" floating mid-card, then
"HD Event Styling" on a line of its own β and the same for 9:15am TBC and
12:30am NEXT DAY.
The cause: `.arr-card-list li` is `display: block` on paper (above, for the
spacing), and only the top block's rows (`.arrivals-groups`) were made
flex again. So in these boxes the time is an inline span, and the tag β
`display: block` in checks.css, which is not print-scoped β broke the row.
A row, as on screen, and the tag rides BESIDE the time inside its chip, so
a tagged row is one line like every other and the page does not grow.
β οΈ `.is-bar` ONLY. The SUPPLIER ARRIVAL TIMES block at the top is not
touched β 26 September, "You changed the wrong one". */
.arr-card.is-bar .arr-card-list li { display: flex; align-items: baseline; }
.arr-card.is-bar .arr-card-list .arr-name { flex: 1 1 auto; min-width: 0; }
.arr-card.is-bar .arr-card-list .arr-time { white-space: nowrap; }
.arr-card.is-bar .arr-card-list .arr-time .arr-tbc,
.arr-card.is-bar .arr-card-list .arr-time .arr-next { display: inline; margin-left: 3px; }
}
/* The budget panel's View, Needs a look and Tools rows are controls, not the
document β 27 September, with the four-row panel. The totals still print. */
@media print {
.bg-band-view,
.bg-band-attn,
.bg-band-tools,
.bg-adds { display: none !important; }
}
/* Venue key details on paper. It sits in the MIDDLE of the sheet now, above
the first evening moment, so it no longer spends the page-one budget at the
top. Five columns and tight, and never split across two pages. Not yet
measured on a real printout β Ctrl+P on a real wedding before trusting it. */
@media print {
.tl-night-li { padding: 8px 0 6px; break-inside: avoid; page-break-inside: avoid; }
.tl-night-x, .tl-night-removed { display: none !important; } /* β and the strip: screen only */ .tl-header-night { margin-top: 0; background: #1d4ed8 !important; } /* royal blue, 30 Sept */
#tl-night { border-color: #1d4ed8 !important; }
/* Words black, times in the box's colour β the screen's rule, on paper. */
#tl-details .tl-detail .k,
#tl-night .tl-detail .k { color: #000 !important; }
#tl-details .tl-detail .v { color: #00565e !important; }
#tl-night .tl-detail .v { color: #1d4ed8 !important; }
#tl-details .tl-detail.is-none .k, #tl-details .tl-detail.is-none .v,
#tl-night .tl-detail.is-none .k, #tl-night .tl-detail.is-none .v { color: #ef0000 !important; }
#tl-night .tl-detail.is-tbc .v { color: #b34e00 !important; }
/* A suggested Key details time prints grey β never as fact β and the two
on-screen notes ("confirm in Edit", "typed β¦") are hers, not a supplier's. */
#tl-details .tl-detail.is-suggested .v { color: #8a7d84 !important; font-style: italic; }
#tl-details .kd-sug, #tl-details .kd-was { display: none !important; }
#tl-night {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
row-gap: 6px !important;
}
.tl-detail.is-tbc .v { color: #b34e00 !important; }
}
/* Key details on paper, option B: the places as a list, the times in a
four-across grid. The contact numbers go together on a supplier's copy
unless she ticks the box. */
@media print {
#tl-details.is-ww { display: block !important; }
.kd-row { grid-template-columns: 150px minmax(0, 1fr); padding: 4px 0; }
.kd-k { font-size: 7.5pt; color: #000 !important; }
.kd-name { font-size: 9.5pt; color: #00565e !important; }
.kd-addr { font-size: 9pt; color: #2a2126 !important; }
.kd-row.is-none .kd-k, .kd-row.is-none .kd-name { color: #ef0000 !important; }
.kd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px 14px; margin-top: 8px; }
#tl-details.is-ww .tl-kd-contact { margin-top: 8px; }
/* π THE WHOLE STRIP PRINTS ON EVERY COPY β 21 October. On 29 September only
the venue's number printed on a supplier's copy and the rest waited for the
tick; that hid the strip ENTIRELY on any wedding with no venue number
(Solin & Rony's emailed PDF had none). Gee: "It should always show." The
tick on the print dialog now covers only "Who to ring on the day". */
}
/* π½ The supplier table card prints orange, not the arrival card's blue β the
blue rule above carries !important, so this one has to as well. CHECK 261. */
@media print {
.arr-card.is-bar.is-suptable { border-color: #c2410c; }
.arr-card.is-bar.is-suptable .arr-card-head { background: #c2410c !important; }
.arr-card.is-bar.is-suptable .arr-card-count { color: #c2410c; }
.suptable-vis { display: none !important; }
/* The body on paper β the screen's look, at paper sizes. CHECK 268. */
.suptable-body { padding: 4px 10px 5px; }
.suptable-where { font-size: 10pt; }
.suptable-count { padding: 2px 0; font-size: 8.5pt; grid-template-columns: 28px minmax(0, 1fr); break-inside: avoid; }
.suptable-n { font-size: 9pt; }
.suptable-note { padding-top: 3px; font-size: 8pt; }
}