/* =========================================================================== THE LOOK, AS SETTLED IN THE SANDBOXES -- Sep 4, 2026. On the sandbox drawing: "I love the look that you built... It does not look like KB nor does it look like DBP, so it works completely." And on why the app's own look does not do the job: "I can't see everything when it's flat and looks like a document to me." That is the whole brief. Regions are separated by SURFACE and BORDER, not by whitespace, so the eye can find where one thing ends and the next begins. Labels are condensed uppercase; every number is monospaced and tabular so columns of figures line up; corners are square; borders are one pixel and everywhere. SCOPED, DELIBERATELY. Everything in this file lives under `body.k9-preview` and only the two preview pages carry that class. The app went live Sep 3 and the kennel runs on it; a palette swap across forty pages would have somebody finding black-on-black text during a check-in. The call, and it was the right one: "it seems like the safest way to go is to make two preview pages." WHEN THIS IS ADOPTED, the scope comes off and this becomes app.css. That unscoping is where things drift, so the rule to carry forward: no color is written as a literal outside the two blocks at the top of this file. DARK AND LIGHT BOTH, following the device, with a switch on the bar. Decided Sep 4 -- it follows the device, a person may override it, and no facility can force it. The reason for the last part, and it settles it: "especially if someone has accessibility colors on their system due to bad eyes, or being color blind or something." =========================================================================== */ body.k9-preview { --ground:#f5f4ef; --surface:#ffffff; --surface-2:#efeee7; --pk:#1b201c; --pk-2:#4d534d; --pk-3:#7d837c; --line:#dcdbd2; --line-2:#c8c8bd; --accent:#2f5d4a; --accent-soft:#e2ebe5; --brand-fill:#2f5d4a; --on-fill:#ffffff; --rail-hover:#ffffff; --red:#9f2b1f; --red-soft:#f7e6e3; --red-line:#e0b7b0; --amber:#8a5c0d; --amber-soft:#f7edd8; --ok:#356b47; --lock:#5d6570; --lock-soft:#e8eaed; --rail:#242b28; --rail-ink:#e4e7e2; --rail-line:#3a4340; --rail-2:#2e3733; --note:#7a5a12; --note-bg:#fbf3df; --note-line:#e6d3a6; --shadow:0 1px 0 rgba(27,32,28,.04), 0 1px 3px rgba(27,32,28,.06); /* ⭐ The looking-at-the-portal bar. Deliberately NOT the facility's accent: it must not be brandable, because its whole job is to say 'this is not a client's session' on a page that otherwise looks exactly like one. In the palette so it follows dark mode. */ --looking:#8a5a00; --looking-ink:#6d4700; /* ⛔ And the same bar standing on a REAL client's record, 18 Sep 2026. A different family from the practice one on purpose: the practice bar says 'nothing here is real' and this one is the opposite, so they must not read alike at a glance. */ --looking-real:#8a1c1c; --looking-real-ink:#6d1616; /* The calendar's booking colors, so they follow dark mode. 4 Oct 2026. */ --cal-boarding:#d8f3dc; --cal-bt:#ffe8cc; --cal-day:#d0ebff; --cal-groom:#ffd6e8; --cal-train:#e5dbff; --cal-over:#fbe9e7; --cal-over-line:#e0a89f; --cal-over-ink:#a33333; } /* THE DEVICE DECIDES, unless the person has said otherwise on the bar. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.k9-preview { --ground:#13171a; --surface:#1b2124; --surface-2:#232a2e; --pk:#e7e9e4; --pk-2:#a8afab; --pk-3:#7d857f; --line:#2d3539; --line-2:#3c4649; --accent:#7fc0a2; --accent-soft:#1e2f28; --brand-fill:#7fc0a2; --on-fill:#111418; --red:#e08375; --red-soft:#331f1c; --red-line:#5d332c; --amber:#d7a44c; --amber-soft:#2e2617; --ok:#79b98e; --lock:#9aa4b0; --lock-soft:#232a31; --rail:#0e1214; --rail-ink:#dfe3df; --rail-line:#293134; --rail-2:#171d20; --note:#d8b96a; --note-bg:#26210f; --note-line:#4a3f1c; --shadow:0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.35); --looking:#a86f06; --looking-ink:#3c2700; --looking-real:#c0392b; --looking-real-ink:#3c0f0f; --cal-boarding:#1f3a2a; --cal-bt:#3d2e17; --cal-day:#1a3042; --cal-groom:#3b2030; --cal-train:#2c2645; --cal-over:#3a1f1b; --cal-over-line:#6b3a33; --cal-over-ink:#e08375; } } html[data-theme="dark"] body.k9-preview { --ground:#13171a; --surface:#1b2124; --surface-2:#232a2e; --pk:#e7e9e4; --pk-2:#a8afab; --pk-3:#7d857f; --line:#2d3539; --line-2:#3c4649; --accent:#7fc0a2; --accent-soft:#1e2f28; --brand-fill:#7fc0a2; --on-fill:#111418; --red:#e08375; --red-soft:#331f1c; --red-line:#5d332c; --amber:#d7a44c; --amber-soft:#2e2617; --ok:#79b98e; --lock:#9aa4b0; --lock-soft:#232a31; --rail:#0e1214; --rail-ink:#dfe3df; --rail-line:#293134; --rail-2:#171d20; --note:#d8b96a; --note-bg:#26210f; --note-line:#4a3f1c; --shadow:0 1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.35); --looking:#a86f06; --looking-ink:#3c2700; --looking-real:#c0392b; --looking-real-ink:#3c0f0f; --cal-boarding:#1f3a2a; --cal-bt:#3d2e17; --cal-day:#1a3042; --cal-groom:#3b2030; --cal-train:#2c2645; --cal-over:#3a1f1b; --cal-over-line:#6b3a33; --cal-over-ink:#e08375; } /* The two type families the sandbox used. Loaded from Google in the preview only. BEFORE THIS IS ADOPTED they get self-hosted: the provenance inventory for the lawyers says zero third-party CDN, and a font link is a third-party CDN. Flagged rather than quietly kept. */ body.k9-preview { background: var(--ground); color: var(--pk); font-family: "Barlow", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; } body.k9-preview * { box-sizing: border-box; } /* --------------------------------------------------------------------------- ⭐⭐ THE CONTROLS BELONG TO THE THEME TOO. Sep 8, 2026. On the live dashboard in dark mode: "those input points are black under the dark theme. Well, guess what you can't see when the words behind them, i e month month slash day day slash year year year, you can't read it because the theme is black and the Text is black." ⛔ MEASURED ON THE LIVE PAGE, and it was worse than the two fields she named. Every control in Quick Checkin, read out of the browser: date, time dark background, BLACK text number WHITE background, black text select WHITE background, black text search correct The search box was the only one anybody had written a rule for. Everything else fell through to app.css, whose palette is light-only -- var(--card) is #ffffff and there is no dark value for it -- so the fields were being drawn from a different theme than the page around them. ⭐ THE SAME MISTAKE AS THE PORTAL'S UNDRESSED BOXES, ONE FLOOR UP. That one was fixed by widening the DOOR's selector, which dressed the doors and not the shell; two pages built hours later arrived undressed. This is the staff-side version: the find bar got dressed and the form controls did not. So the rule goes on the SCOPE, once, and a control added next month is covered by existing rather than by somebody remembering. ⭐⭐ AND color-scheme, WHICH IS THE HALF NO STYLESHEET CAN REACH. Setting color on an input does not touch what the browser paints INSIDE it -- the mm/dd/yyyy placeholder, the calendar and clock icons, the number spinners, the dropdown list a select opens. Those are the user agent's, and the only way to tell it this page is dark is color-scheme. It was declared nowhere in this application, on any page, so the browser painted every one of them in light mode over a dark page. It is set HERE, on the scope, and not on :root -- the forty pages that do not carry this class are still on app.css's light-only palette, and telling the browser THEY are dark would put dark widgets on a light page. That is the wider fix and it is a bigger job than this one. --------------------------------------------------------------------------- */ body.k9-preview { color-scheme: light; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.k9-preview { color-scheme: dark; } } html[data-theme="dark"] body.k9-preview { color-scheme: dark; } /* ⚠️ :where() SO THIS CANNOT OUTRANK ANYTHING. A :not() chain carries the specificity of everything inside it -- five of them would have scored higher than the find bar's own rule and higher than the portal's, and this blanket would have overruled two deliberate designs while fixing a third thing. :where() contributes nothing, so every existing rule still wins. */ body.k9-preview input:where(:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"],[type="file"])), body.k9-preview select, body.k9-preview textarea { background: var(--surface); color: var(--pk); border: 1px solid var(--line-2); } /* --------------------------------------------------------------------------- ⛔ NO SPINNERS ON MONEY. Sep 8, 2026. The spinner comes off. An amount is either typed in or it arrives already set by the program -- and a spinner causes problems on money. A number spinner steps by ONE. On a price that means a stray scroll wheel or a mistimed click turns $500.00 into $501.00 silently, in a field whose whole job is to be exactly right -- and the arrows sit under the cursor on the way to the button beside them. The field keeps type="number", so the numeric keypad still comes up on a phone and the browser still refuses letters. Only the arrows go. --------------------------------------------------------------------------- */ body.k9-preview input[type="number"]::-webkit-outer-spin-button, body.k9-preview input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.k9-preview input[type="number"] { -moz-appearance: textfield; } /* The door the sibling row sits behind, so it reads as a thing you open rather than a question the page is asking. */ body.k9-preview details.add-a-sibling > summary { cursor: pointer; color: var(--accent); font-size: 13px; width: fit-content; } body.k9-preview input::placeholder, body.k9-preview textarea::placeholder { color: var(--pk-3); opacity: 1; } body.k9-preview input:disabled, body.k9-preview select:disabled, body.k9-preview textarea:disabled { background: var(--surface-2); color: var(--pk-3); -webkit-text-fill-color: var(--pk-3); } /* ---- the top bar, inside the scope ---- */ body.k9-preview .topbar { background: var(--rail); color: var(--rail-ink); border-bottom: 1px solid var(--rail-line); padding: 8px 20px; } body.k9-preview .topbar .brand { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .09em; text-transform: uppercase; } body.k9-preview .topbar .brand-logo { height: 34px; } body.k9-preview .topbar .nav-links a, body.k9-preview .topbar a.logout { color: var(--rail-ink); font-size: 13.5px; } /* The client shell logs out with a form, because Django requires POST. */ body.k9-preview .topbar form.logout-form { display: inline; margin: 0; padding: 0; } /* ⛔⛔ TWO LOG OUTS ON ONE BAR. Sep 7, 2026: "on the dashboard and the record activity board, we have two logouts. We have a logout sitting right next to settings and another logout at the edge of the page on the right side. We need to remove the logout that's sitting right next to settings." ⭐ THERE ARE SUPPOSED TO BE TWO IN THE MARKUP, and only ever one on screen: the copy inside the menu is the PHONE's door, the copy at the right edge is the desktop's. base.html says so and app.css has hidden the wrong one at each width since it was drawn. What broke it was the line directly above. `body.k9-preview .topbar form.logout-form` carries one more element than app.css's `.topbar .nav-links form.nav-logout`, and at equal class counts the extra element wins -- so on every page wearing the preview skin, display:inline beat display:none and both doors came back. The dashboard and the activity board are two of those pages. ⚠️ The fix is NOT to delete the menu's copy. On a phone the bar's copy is the hidden one, and deleting the other would leave somebody with no way to sign out on the device she actually uses -- which is the same bug this button has already had once. So: restate app.css's rules at this skin's specificity, and nothing else changes. */ body.k9-preview .topbar .nav-links form.nav-logout { display: none; } @media (max-width: 640px) { body.k9-preview .topbar form.logout { display: none; } body.k9-preview .topbar .nav-links form.nav-logout { display: block; } } body.k9-preview .topbar form.logout-form button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--rail-ink); font-size: 13.5px; } body.k9-preview .topbar form.logout-form button:hover { color: var(--rail-hover); } body.k9-preview .topbar .nav-links a:hover { color: var(--rail-hover); } body.k9-preview .view-as-bar { background: var(--amber-soft); color: var(--amber); border-bottom: 1px solid var(--line); } /* The person's own light/dark switch. Sits on the bar because that is where it was asked for: "control on the top bar". */ body.k9-preview .theme-pick { font-family: "Barlow Semi Condensed", sans-serif; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; background: var(--rail-2); color: var(--rail-ink); border: 1px solid var(--rail-line); padding: 5px 11px; cursor: pointer; margin-right: 14px; } body.k9-preview .theme-pick:hover { border-color: var(--rail-ink); color: var(--rail-hover); } body.k9-preview .container { max-width: 1180px; padding: 20px 20px 64px; } /* ---- the read-only banner ---- */ body.k9-preview .pv-readonly { background: var(--note-bg); color: var(--note); border: 0; border-left: 2px solid var(--note-line); border-radius: 0; padding: 9px 13px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; } body.k9-preview .pv-readonly a { color: var(--note); } /* ⭐ A MESSAGE THE APP SAYS BACK TO SOMEBODY. Sep 6, 2026. `.msg` had no styling anywhere in this application -- not here, not in app.css -- so every "saved", "couldn't save" and "welcome" has been bare text floating above the page since the beginning. Nobody noticed because staff read them in passing and know what they mean. It was found the first time a stranger saw one: Fred Test signed himself up, and the sentence welcoming him to Kawa Farms rendered as an unstyled line hanging over the top of his account. That is the first thing a new client ever reads. ⭐ THE ERROR VARIANT IS THE ONE THAT MATTERS MOST. An error nobody can distinguish from body text is an error nobody reads -- which is the same defect as KennelBooker's "or sign in here" in really, really small letters, arriving from the other direction. */ body.k9-preview .msg { padding: 11px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; line-height: 1.45; background: var(--surface); border: 1px solid var(--line-2); color: var(--pk); } body.k9-preview .msg.success { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } body.k9-preview .msg.error { background: var(--red-soft); border-color: var(--red-line); color: var(--red); } body.k9-preview .msg.warning { border-color: var(--accent); } /* ⭐ THE GREETING NEEDS ROOM UNDER IT ON A CLIENT PAGE. On the staff pages the identity block is followed by its tab strip, which is why it carries no bottom padding. The client's home page puts a CARD straight after it, and the two collided along their shared border the first time anybody looked. */ body.k9-preview.my-portal .ident { padding-bottom: 16px; margin-bottom: 14px; } /* ---- identity ---- */ /* ⭐ Your accounts, under Hello, for a login on more than one (15 Oct 2026, from the mockup she approved). */ body.k9-preview .my-accounts { margin-top: 12px; } body.k9-preview .my-accounts .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } body.k9-preview .my-accounts .row { display: flex; flex-wrap: wrap; gap: 8px; } body.k9-preview .my-accounts .acct { display: inline-block; text-align: left; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; cursor: pointer; } body.k9-preview .my-accounts .acct.on { border: 2px solid var(--accent); font-weight: 700; } body.k9-preview .my-accounts .acct span { display: block; font-size: 11px; font-weight: 400; color: var(--muted); } body.k9-preview .ident { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px 20px 0; } body.k9-preview .ident-top { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-end; justify-content: space-between; } body.k9-preview .ident-who { display: flex; align-items: flex-end; gap: 16px; } body.k9-preview h1 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 34px; line-height: 1; margin: 0; letter-spacing: -.01em; } body.k9-preview .sub { color: var(--pk-2); font-size: 13.5px; margin-top: 6px; } body.k9-preview .sub a { color: var(--accent); } /* ⭐ THE TEMPERAMENT, AT THE SIZE OF THE DOG'S NAME. Sep 5, 2026. The temperament is as large as the letters of the dog's own name, on the right, above the service-dog line. So the right-hand column becomes a stack: the temperament on top, the chips under it. THE COLOR IS THE BOX, NOT A ROW OF ITS OWN -- "the temperament color will actually change the box that the word temperament is in." The color comes off the record as an inline style because it is DATA, not a class: the facility picks from ten and decides what each one means, and no stylesheet gets to encode that. White type on a picked color, with a dark shadow behind it so it stays legible on yellow as well as on black. Yellow with white on it is the one combination that fails, and it is the one already called out on the run card. */ body.k9-preview .ident-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } body.k9-preview .temperament { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.01em; padding: 6px 14px 8px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); max-width: 100%; text-align: right; } /* Nothing picked: the word still shows, in the page's own ink rather than in a color that would mean something it has not been given. */ body.k9-preview .temperament.untinted { background: none; color: var(--pk); text-shadow: none; border: 1px solid var(--line-2); padding: 5px 13px 7px; } @media (max-width: 700px) { body.k9-preview .ident-right { align-items: flex-start; } body.k9-preview .temperament { font-size: 26px; text-align: left; } } /* A NOTE, AND THE LINE UNDER IT. Sep 5, 2026 -- a dog's notes became dated entries with a name on them, the same shape the client page got that morning. The text reads first and the attribution sits under it in the quiet type, because the note is what somebody came to read. */ body.k9-preview .note-entry { padding: 12px 16px; border-bottom: 1px solid var(--line); } body.k9-preview .note-entry:last-child { border-bottom: 0; } body.k9-preview .note-said { line-height: 1.55; } body.k9-preview .note-entry .whocan { display: block; margin-top: 4px; } /* One small word, and the history is behind it rather than on it: the amended note, and a small footer that says it was amended. */ body.k9-preview .was-updated { font-style: italic; } /* Folded by time. The summary is a heading you can press, so it reads as part of the page rather than as a control bolted onto it. */ body.k9-preview .notes-fold > summary { cursor: pointer; list-style: none; padding: 12px 16px 10px; } body.k9-preview .notes-fold > summary::-webkit-details-marker { display: none; } body.k9-preview .notes-fold > summary:hover { color: var(--accent); } body.k9-preview .notes-fold > summary::before { content: "▸ "; } body.k9-preview .notes-fold[open] > summary::before { content: "▾ "; } /* The facility's own legend, drawn only where they have written one. */ body.k9-preview .colorkey { display: inline-block; margin-right: 14px; white-space: nowrap; } body.k9-preview .colorkey i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border: 1px solid rgba(0, 0, 0, .25); vertical-align: baseline; } body.k9-preview .ident-chips { display: flex; gap: 8px; flex-wrap: wrap; } body.k9-preview .pchip { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--line-2); color: var(--pk-2); } body.k9-preview .pchip.here { background: var(--accent-soft); border-color: transparent; color: var(--accent); } body.k9-preview .pchip.vip { background: var(--lock-soft); border-color: transparent; color: var(--lock); } /* ⭐ VIP IS ORANGE, EVERYWHERE IT APPEARS. 22 Sep 2026 -- hers: it stands out. Its own class, because the gray chip above also reads "Active" and "Current" on a program and those stay gray. */ body.k9-preview .pchip.vip-mark { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); } /* ⭐ A CODE CHIP WEARS ITS OWN COLOR -- red safety, amber administrative, slate identity -- the color the code carries in Settings. 22 Sep 2026. */ body.k9-preview .pchip.red { background: var(--red-soft); border-color: var(--red-line); color: var(--red); } body.k9-preview .pchip.amber { background: var(--amber-soft); border-color: transparent; color: var(--amber); } body.k9-preview .pchip.slate { background: var(--lock-soft); border-color: transparent; color: var(--lock); } /* THE DOG'S PHOTO. Sep 4: the dog page needs a dog picture. And the other way on the client page -- names and runs in Here Now and in the dog list, no photos: "I think it is appropriate there not to have their pictures." */ body.k9-preview .ident-photo { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--line-2); display: block; } /* ⭐ CLICK IT AND SEE HER PROPERLY. Sep 7, 2026 -- there was no way to click the picture for a better look when the dog was farther away. ⚠️ It LOOKS clickable before it is clicked. A control that does something and gives no sign of it is the same defect as one that looks like it does something and does not -- this project has found the second kind in other people's software eleven times. */ body.k9-preview .bigpic-open { cursor: zoom-in; display: block; } body.k9-preview.my-portal .bigpic-open:hover .ident-photo, body.k9-preview.my-portal .bigpic-open:focus-visible .ident-photo { border-color: var(--accent); } body.k9-preview .bigpic-open:hover .ident-photo, body.k9-preview .bigpic-open:focus-visible .ident-photo { border-color: var(--pk); } body.k9-preview .bigpic-sheet { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(17, 17, 17, 0.82); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; } body.k9-preview .bigpic-toggle:checked ~ .bigpic-sheet { display: flex; } body.k9-preview .bigpic-sheet img { max-width: min(1100px, 92vw); max-height: 88vh; object-fit: contain; background: var(--bg); border: 1px solid var(--line-2); } /* The word, not only the dark ground, because "click anywhere to close" is knowledge somebody has to already have. */ body.k9-preview .bigpic-shut { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em; } body.k9-preview .actions { display: flex; flex-wrap: wrap; margin: 16px -20px 0; border-top: 1px solid var(--line); } /* THE THREE STATES OF A DOOR -- see the door tag in templatetags/kawa.py. not built | designing | and nothing at all when the page is redrawn, because Sep 4, 2026: once a door is built and redrawn it needs nothing on it, because it is done. */ body.k9-preview .door { font-weight: 500; color: var(--pk); border-right: 1px solid var(--line); padding: 11px 16px; text-decoration: none; font-size: 14.5px; display: inline-flex; align-items: baseline; gap: 7px; } body.k9-preview a.door:hover { background: var(--surface-2); } body.k9-preview a.door.primary { color: var(--accent); font-weight: 600; } body.k9-preview .door.off { color: var(--pk-3); cursor: default; } body.k9-preview .door .mark { font-family: "Barlow Semi Condensed", sans-serif; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--pk-3); border: 1px solid var(--line-2); padding: 1px 5px; white-space: nowrap; } /* Designing is work in progress, not a hole. Amber says "on its way". */ body.k9-preview .door .mark.designing { color: var(--amber); border-color: var(--amber); } /* ---- the red strip ---- */ body.k9-preview .rules-strip { background: var(--red-soft); border: 1px solid var(--red-line); border-top: 0; padding: 12px 16px 14px; } body.k9-preview .rules-strip h2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; } body.k9-preview .rules-strip ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } body.k9-preview .rules-strip li { color: var(--red); font-size: 14px; } body.k9-preview .rules-strip li b { font-family: "Barlow Semi Condensed", sans-serif; font-size: 15.5px; letter-spacing: .01em; } body.k9-preview .rules-strip .who { color: var(--pk-3); font-size: 12px; } /* What the owner said about handling. Quiet on purpose: it is not a rule and must not read like one. */ body.k9-preview .owner-said { background: var(--panel-2, rgba(255,255,255,.03)); border: 1px solid var(--line-2); border-top: 0; padding: 12px 16px 14px; } body.k9-preview .owner-said h2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pk-2); margin: 0 0 8px; } body.k9-preview .owner-said p { margin: 0; font-size: 14px; color: var(--pk); } body.k9-preview .owner-said .note { margin-top: 6px; font-size: 12.5px; color: var(--pk-3); } /* ---- at a glance ---- */ body.k9-preview .glance { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-top: 0; margin-bottom: 22px; } body.k9-preview .g { background: var(--surface); padding: 12px 16px 13px; } body.k9-preview .g .k { font-family: "Barlow Semi Condensed", sans-serif; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-3); } body.k9-preview .g .v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 19px; font-weight: 500; margin-top: 3px; font-variant-numeric: tabular-nums; } body.k9-preview .g .v small { font-family: "Barlow", sans-serif; font-size: 13px; color: var(--pk-2); font-weight: 400; } body.k9-preview .g .v.warn { color: var(--amber); } body.k9-preview .g .v.small { font-size: 15px; } /* ---- columns and cards ---- */ body.k9-preview .cols { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.05fr); gap: 22px; align-items: start; } body.k9-preview .card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 0; padding: 0; margin-bottom: 22px; } body.k9-preview .card > h2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--pk-2); margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } body.k9-preview .whocan { font-family: "Barlow Semi Condensed", sans-serif; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--lock); margin: 0; } body.k9-preview .card-body { padding: 14px 16px; } /* Two cards that belong to each other share a line. Sep 9, 2026, on the bottom of a booking: shrink the payment block and put the invoice on the same line. Nothing is named in here -- any two cards can use it -- and it falls back to one column when the line is too narrow to hold both without cutting either off, which is the complaint that started the whole layout pass. */ body.k9-preview .two-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; } body.k9-preview .two-cards > .card { margin-bottom: 22px; } body.k9-preview .two-cards > .card > form > .inline { flex-wrap: wrap; } body.k9-preview .two-cards > .card > form > .inline .field { flex: 1 1 110px; min-width: 0; } body.k9-preview .two-cards > .card > form > .inline .field select, body.k9-preview .two-cards > .card > form > .inline .field input { width: 100%; } @media (max-width: 900px) { body.k9-preview .two-cards { grid-template-columns: 1fr; gap: 0; } } body.k9-preview dl.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; } body.k9-preview dl.facts dt { font-family: "Barlow Semi Condensed", sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pk-3); padding-top: 2px; } body.k9-preview dl.facts dd { margin: 0; font-size: 15px; } body.k9-preview dl.facts dd.mono { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-variant-numeric: tabular-nums; } body.k9-preview .here-card { border-color: var(--accent); } body.k9-preview .here-card > h2 { background: var(--accent-soft); color: var(--accent); border-bottom-color: var(--accent); } /* ---- tables ---- */ body.k9-preview table { width: 100%; border-collapse: collapse; font-size: 14px; } body.k9-preview th { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-3); text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; } body.k9-preview td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } body.k9-preview tr:last-child td { border-bottom: 0; } body.k9-preview td.mono { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } body.k9-preview a { color: var(--accent); } body.k9-preview .subhead { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-3); padding: 14px 16px 0; margin: 0; } body.k9-preview .empty { padding: 14px 16px; color: var(--pk-3); font-style: normal; } body.k9-preview .state { font-family: "Barlow Semi Condensed", sans-serif; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--line-2); color: var(--pk-3); white-space: nowrap; display: inline-block; } body.k9-preview .state.ok { color: var(--ok); border-color: var(--ok); } body.k9-preview .state.un { color: var(--amber); border-color: var(--amber); } body.k9-preview .state.bad { color: var(--red); border-color: var(--red); } /* Called off. Legible, and plainly not a live booking. */ body.k9-preview .state.off { color: var(--pk-3); border-color: var(--pk-3); } body.k9-preview .note { border-left: 2px solid var(--note-line); background: var(--note-bg); color: var(--note); font-size: 13px; line-height: 1.5; padding: 9px 13px; margin: 12px 16px 14px; } /* ---- the tabs, still radio buttons and labels ---- */ body.k9-preview .tab-strip { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface-2); margin: 0; padding: 0; } body.k9-preview .tab-strip label { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; border: 0; border-right: 1px solid var(--line); border-bottom: 0; padding: 11px 15px; color: var(--pk-2); margin: 0; } body.k9-preview .tab-strip label:hover { color: var(--pk); } body.k9-preview .tab-strip label .n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--pk-3); margin-left: 5px; } body.k9-preview .tab-strip label .n.warn { color: var(--amber); } /* ⭐ SOMEBODY IS WAITING ON YOU — amber, not red. Sep 7, 2026, decided after the argument was put to her: red already means danger on these pages (biter, allergy, the safety flags), and an unread message wearing the same red teaches people that red sometimes means "somebody wrote to you." Amber is what this board already uses for the client-requests band. */ body.k9-preview .tab-strip label .n.waiting { background: var(--amber); color: #fff; border-radius: 9px; padding: 0 7px; margin-left: 5px; } /* The same amber count, worn by the door at the top of the record. */ body.k9-preview .door .n.waiting { font-family: "IBM Plex Mono", monospace; font-size: 12px; background: var(--amber); color: #fff; border-radius: 9px; padding: 0 7px; margin-left: 4px; } body.k9-preview .unread-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--note-bg); border: 1px solid var(--note-line); color: var(--note); padding: 10px 14px; margin-bottom: 16px; } body.k9-preview .thread { display: grid; gap: 14px; margin-bottom: 18px; } body.k9-preview .thread .said { border-left: 3px solid var(--line-2); padding-left: 12px; } body.k9-preview .thread .said.ours { border-left-color: var(--accent); margin-left: 28px; } body.k9-preview .thread .words { margin-top: 3px; } body.k9-preview .answer-here { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; } body.k9-preview .answer-here textarea { width: 100%; max-width: 44rem; } body.k9-preview .tabbed > .t1:checked ~ .tab-strip .l1, body.k9-preview .tabbed > .t2:checked ~ .tab-strip .l2, body.k9-preview .tabbed > .t3:checked ~ .tab-strip .l3, body.k9-preview .tabbed > .t4:checked ~ .tab-strip .l4, body.k9-preview .tabbed > .t5:checked ~ .tab-strip .l5, body.k9-preview .tabbed > .t6:checked ~ .tab-strip .l6, body.k9-preview .tabbed > .t7:checked ~ .tab-strip .l7, body.k9-preview .tabbed > .t8:checked ~ .tab-strip .l8 { background: var(--surface); color: var(--pk); box-shadow: inset 0 2px 0 var(--accent); border-bottom-color: transparent; } @media (max-width: 900px) { body.k9-preview .glance { grid-template-columns: repeat(3, 1fr); } body.k9-preview .cols { grid-template-columns: 1fr; } } @media (max-width: 560px) { body.k9-preview .glance { grid-template-columns: repeat(2, 1fr); } body.k9-preview h1 { font-size: 28px; } body.k9-preview dl.facts { grid-template-columns: 1fr; gap: 2px; } body.k9-preview dl.facts dd { margin-bottom: 8px; } } /* --------------------------------------------------------------------------- A STAY, DRAWN AS THE RUNS IT OCCUPIES. Sep 4, 2026 -- see _preview_stay_block.html for why this is not a table. --------------------------------------------------------------------------- */ body.k9-preview .stay-head { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); } body.k9-preview .stay-head + .stay-head { border-top: 1px solid var(--line); } body.k9-preview .stay-head .type { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 20px; } body.k9-preview .stay-head .type a { color: var(--pk); text-decoration: none; } body.k9-preview .stay-head .type a:hover { color: var(--accent); } body.k9-preview .stay-head .when { font-family: "IBM Plex Mono", monospace; font-size: 13.5px; color: var(--pk-2); font-variant-numeric: tabular-nums; } body.k9-preview .stay-head .paid { margin-left: auto; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ok); } body.k9-preview .runs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); } /* The red edge is the run card's stripe: this seat has something on it. */ body.k9-preview .run { background: var(--surface); padding: 11px 14px 12px; display: flex; gap: 11px; align-items: flex-start; box-shadow: inset 3px 0 0 var(--red); } body.k9-preview .run.clear { box-shadow: inset 3px 0 0 var(--line-2); } body.k9-preview .run .plate { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 600; border: 1px solid var(--line-2); color: var(--pk-2); padding: 3px 6px; white-space: nowrap; margin-top: 1px; } body.k9-preview .run .dog { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--pk); text-decoration: none; } body.k9-preview .run .dog:hover { color: var(--accent); } /* THE SPACE BEFORE THE CODE. Sep 4: the code badge was running into the dog's name. A margin, not a space character, so it cannot be eaten by template whitespace trimming. */ body.k9-preview .run .k9 { font-family: "Barlow Semi Condensed", sans-serif; font-size: 11px; letter-spacing: .07em; color: var(--pk-3); margin-left: 7px; } body.k9-preview .run .flags { font-size: 12.5px; color: var(--red); margin-top: 2px; } @media (max-width: 700px) { body.k9-preview .runs { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- A SESSION IS ONE LINE. Sep 14, 2026, on eight sessions down one client's page: too big, too full. The text is right, but each session should sit on the same line as the dog's name, so Upcoming does not take up so much space. The dog leads, because that is the order she said it in. Everything else is the same type it already was -- nothing here restyles the words, it only stops them stacking. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- THE INCIDENT FORM. Sep 14, 2026 -- the sheet's style had to be fixed, found while filing a real one on a dog that was on the property at the time. --------------------------------------------------------------------------- */ body.k9-preview .inc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; } body.k9-preview .inc-form .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } body.k9-preview .inc-form .field.full { grid-column: 1 / -1; } body.k9-preview .inc-form label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pk-3); } body.k9-preview .inc-form select, body.k9-preview .inc-form input, body.k9-preview .inc-form textarea { width: 100%; padding: 7px 9px; border-radius: 3px; } body.k9-preview .inc-form textarea { min-height: 120px; resize: vertical; } body.k9-preview .inc-form button { grid-column: 1 / -1; width: fit-content; } body.k9-preview .inc-hint { margin: 2px 0 0; font-size: 12px; color: var(--pk-3); } /* The internal half is marked on the screen as well as in the model, so nobody types findings into the releasable box by accident. */ body.k9-preview .inc-internal { border-left: 3px solid var(--amber); padding-left: 11px; } body.k9-preview .inc-record .inc-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid var(--line); } body.k9-preview .inc-record .inc-head h3 { margin: 0; font-size: 18px; } body.k9-preview .inc-record .inc-book { font-size: 14px; } body.k9-preview .inc-record .inc-by { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--pk-3); } body.k9-preview .inc-lab { margin: 12px 0 4px; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pk-3); font-weight: 600; } body.k9-preview .inc-record .inc-lab:first-of-type { margin-top: 0; } body.k9-preview .inc-said { margin: 0; font-size: 15px; line-height: 1.45; } body.k9-preview .inc-internal-read { border-left: 3px solid var(--amber); padding: 1px 0 1px 11px; margin-top: 12px; } body.k9-preview .inc-entries { display: flex; flex-direction: column; gap: 8px; } body.k9-preview .inc-entry { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 14px; } body.k9-preview .inc-entry .when { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--pk-3); } body.k9-preview .inc-entry .who { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--pk-3); white-space: nowrap; } body.k9-preview .inc-entry.internal { box-shadow: inset 3px 0 0 var(--amber); padding-left: 9px; } body.k9-preview .inc-more { margin-top: 14px; } /* ⛔ A CONTROL THAT DOES SOMETHING HAS TO LOOK LIKE IT -- 03-THE-RULES §5.9. 14 Sep 2026: this shipped as faint underlined text labelled "Fix a typo in this". It was read on a real incident, on a dog on the property, as the record being closed -- and a delete was asked for so it could be started over. The words were wrong and the weight was wrong. */ body.k9-preview .inc-more > summary { cursor: pointer; color: var(--accent); font-size: 14px; width: fit-content; font-weight: 600; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 6px; text-decoration: none; } body.k9-preview .inc-more > summary:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); } body.k9-preview .inc-more > .inc-form { margin-top: 11px; } body.k9-preview .inc-check { display: flex; gap: 7px; align-items: center; font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--pk-2); } body.k9-preview .inc-check input { width: auto; } @media (max-width: 640px) { body.k9-preview .inc-entry { grid-template-columns: 1fr; gap: 2px; } } @media (max-width: 640px) { body.k9-preview .inc-form { grid-template-columns: 1fr; } } body.k9-preview .stay-head.one-line { padding: 10px 16px; gap: 4px 14px; } body.k9-preview .stay-head.one-line .dogs { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.15; } body.k9-preview .stay-head.one-line .dogs .dog { color: var(--pk); text-decoration: none; } body.k9-preview .stay-head.one-line .dogs .dog:hover { color: var(--accent); } body.k9-preview .stay-head.one-line .dogs .sep { color: var(--pk-3); margin-right: 2px; } /* Same margin the seat used, for the same reason: "the canine is running into the dog's name." */ body.k9-preview .stay-head.one-line .dogs .k9 { font-family: "Barlow Semi Condensed", sans-serif; font-size: 11px; letter-spacing: .07em; color: var(--pk-3); margin-left: 7px; } body.k9-preview .stay-head.one-line .type { font-size: 17px; } /* The rules keep their red and their line. A dog that has none costs nothing. */ body.k9-preview .stay-line-flags { font-size: 12.5px; color: var(--red); padding: 0 16px 10px; border-bottom: 1px solid var(--line); } body.k9-preview .stay-line-flags b { font-weight: 600; } /* THE CODES COLUMN. A badge that follows a name starts wherever that name ends, so a column of them lines up with nothing. Its own cell, left justified, narrow enough that it does not push the table around. */ body.k9-preview td.codes { white-space: nowrap; width: 1%; } body.k9-preview td.codes .code-badge-sm { margin: 0 4px 0 0; } /* The client's own code, beside the name: right next to it, not touching it, and not twenty feet away. The gap is a margin so template whitespace cannot eat it. */ body.k9-preview h1 .name-chip { margin-left: 12px; vertical-align: middle; } /* MONEY'S OWN KINDS, INSIDE THE MONEY TAB. Sep 4, 2026, on the first attempt: it loaded ugly -- invoices, payments and wallet needed to sit lower so they did not hit the tab above, and invoices was hanging off the edge. Both were the same mistake -- it was pulled out to the card's edges with negative margins, so it spanned the full width like a SECOND tab bar and sat flush against the first. Two bars of the same weight, touching, and the left-hand one running past the content under it. It is not a second bar. It is a choice made INSIDE one tab, so it is indented to the content, given air above it, and drawn as segments rather than as tabs. */ /* ⭐ ONE SUB-STRIP, DRAWN ONE WAY. Sep 5, 2026, on the Health tab: its look is based on how money was done on the customer's page -- not how it works, but how it looks. So Health's four kinds and Money's three kinds are the SAME component under two names, rather than a second strip that drifts a pixel a month. `.money-tabbed` is kept as a name the client page already uses. */ body.k9-preview .money-tabbed, body.k9-preview .sub-tabbed { margin: 0; padding: 16px 16px 0; } body.k9-preview .money-tabbed > .tab-strip, body.k9-preview .sub-tabbed > .tab-strip { background: none; border-bottom: 0; gap: 6px; padding: 0; margin: 0 0 14px; } body.k9-preview .money-tabbed > .tab-strip label, body.k9-preview .sub-tabbed > .tab-strip label { font-size: 12px; padding: 6px 13px; border: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); color: var(--pk-2); background: var(--surface-2); } body.k9-preview .money-tabbed > .tab-strip label:hover, body.k9-preview .sub-tabbed > .tab-strip label:hover { border-color: var(--accent); } /* The chosen one is filled, not underlined -- an underline is what the tabs above use, and two things must not say "selected" the same way. */ body.k9-preview .money-tabbed > .t1:checked ~ .tab-strip .l1, body.k9-preview .money-tabbed > .t2:checked ~ .tab-strip .l2, body.k9-preview .money-tabbed > .t3:checked ~ .tab-strip .l3, body.k9-preview .sub-tabbed > .t1:checked ~ .tab-strip .l1, body.k9-preview .sub-tabbed > .t2:checked ~ .tab-strip .l2, body.k9-preview .sub-tabbed > .t3:checked ~ .tab-strip .l3, body.k9-preview .sub-tabbed > .t4:checked ~ .tab-strip .l4 { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); box-shadow: none; } body.k9-preview .money-tabbed .subhead, body.k9-preview .sub-tabbed .subhead { padding-left: 0; padding-right: 0; } body.k9-preview .money-tabbed .card-body, body.k9-preview .sub-tabbed .card-body { padding-left: 0; padding-right: 0; } body.k9-preview .money-tabbed .table-scroll, body.k9-preview .sub-tabbed .table-scroll { margin: 0 -16px; } body.k9-preview .money-tabbed .note, body.k9-preview .sub-tabbed .note { margin-left: 0; margin-right: 0; } /* THE WEIGHT CARD, BORROWED. It is drawn for the live pages and brings its own box; inside a tab it is already in one, so the box comes off and only the contents stay. */ body.k9-preview .sub-tabbed .card { border: 0; border-radius: 0; box-shadow: none; background: none; margin: 0; padding: 0; } body.k9-preview .sub-tabbed .card > h3 { display: none; } /* THE MONEY BAR, at the top of the Money tab. Four cells, and it is the same component as the strip at the top of a record -- one bar drawn one way, wherever it appears. Sep 4, 2026. */ body.k9-preview .money-bar { grid-template-columns: repeat(4, 1fr); border-top: 0; margin: 0 0 0; } body.k9-preview .money-bar .v small { font-size: 15px; color: var(--pk-2); } @media (max-width: 700px) { body.k9-preview .money-bar { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------------------------- A CARD, OPEN. Sep 4, 2026 — the rule: a card is text until you press its Edit, so the editing state has to look unmistakably different from the reading state, not merely have boxes in it. --------------------------------------------------------------------------- */ body.k9-preview .card > h2 .edit { font-family: "Barlow", sans-serif; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--accent); border: 1px solid var(--line-2); background: none; padding: 3px 11px; text-decoration: none; } body.k9-preview .card > h2 .edit:hover { border-color: var(--accent); background: var(--accent-soft); } body.k9-preview dl.facts.editing { gap: 10px 16px; align-items: center; } body.k9-preview dl.facts.editing input[type="text"], body.k9-preview dl.facts.editing input[type="email"], body.k9-preview dl.facts.editing input[type="date"], body.k9-preview dl.facts.editing select, body.k9-preview dl.facts.editing textarea { font: inherit; width: 100%; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--pk); padding: 5px 8px; } body.k9-preview dl.facts.editing textarea { resize: vertical; } body.k9-preview dl.facts.editing input:focus, body.k9-preview dl.facts.editing select:focus, body.k9-preview dl.facts.editing textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; } /* ⭐ THE CODES: what they have, and a door to the rest. Sep 4, 2026: not a picker like this -- twenty codes would run down the whole page. So the ones a client holds are ticks on the card, and everything else folds away behind "Add a code". */ body.k9-preview .code-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 14px 4px 0; white-space: nowrap; } body.k9-preview .code-tick input { width: auto; } body.k9-preview .code-tick.on { font-weight: 500; } body.k9-preview .code-more { margin-top: 6px; } body.k9-preview .code-more > summary { cursor: pointer; font-family: "Barlow Semi Condensed", sans-serif; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: inline-block; padding: 3px 0; } body.k9-preview .code-more > summary::marker { color: var(--pk-3); } body.k9-preview .code-tick-row { display: flex; flex-wrap: wrap; margin-top: 6px; padding: 9px 11px; background: var(--surface-2); border: 1px solid var(--line); } body.k9-preview .card-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; } body.k9-preview .card-actions button { font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; background: var(--brand-fill); border: 1px solid var(--brand-fill); color: var(--on-fill); padding: 7px 20px; } body.k9-preview .card-actions button:hover { filter: brightness(1.08); } /* Cancel is a way out, not a second Save -- so it is a link, not a button. */ body.k9-preview .card-actions .cancel { color: var(--pk-2); font-size: 14px; } /* An open card says so from across the page. */ body.k9-preview .card:has(dl.facts.editing) { border-color: var(--accent); } /* WALLET'S FOUR BOXES. Points, Credit and Wallet are set by a person; Lifetime is the door to the money from before this system. Drawn as boxes because that is how they were asked for -- each in its own little box, not looking like text boxes. Sep 4, 2026. */ body.k9-preview .money-boxes { grid-template-columns: repeat(5, 1fr); border-top: 0; margin: 0 0 18px; } body.k9-preview .money-boxes .box { text-decoration: none; color: inherit; display: block; } body.k9-preview .money-boxes .box:hover { background: var(--surface-2); } body.k9-preview .money-boxes .box:hover .k { color: var(--accent); } body.k9-preview .money-boxes .v .none { font-family: "Barlow", sans-serif; font-size: 14px; color: var(--accent); } @media (max-width: 700px) { body.k9-preview .money-boxes { grid-template-columns: repeat(2, 1fr); } } /* A box, opened. */ body.k9-preview .opened { border: 1px solid var(--accent); background: var(--surface); padding: 0 16px 16px; margin: 0 0 18px; } body.k9-preview .opened .subhead { padding-left: 0; } body.k9-preview .opened .note { margin: 0 0 14px; } /* --- The write doors, and what they open. Sep 5, 2026. ------------------ * The form opens under the button row, never inside the tab that shows what * it made -- redesign doc SS 4c. */ .door.on { border-color: var(--accent); color: var(--accent); } .opened.writing { margin-top: 12px; } .opened.writing .facts.editing { margin-bottom: 10px; } /* A list of names you click, never a document drawn into the page. * They are named, and clicking the name opens the document. */ .named-list { list-style: none; margin: 6px 0 0; padding: 0; } .named-list li { padding: 7px 0; border-bottom: 1px solid var(--line); } .named-list li:last-child { border-bottom: 0; } .named-list a { font-weight: 600; } .named-list .whocan { margin-left: 10px; } /* A note is a record: what was said, then who said it and when. */ ul.notes { list-style: none; margin: 6px 0 0; padding: 0; } ul.notes li { padding: 10px 0; border-bottom: 1px solid var(--line); } ul.notes li:last-child { border-bottom: 0; } .note-said { margin-bottom: 4px; } /* The wording somebody agreed to, read on a screen. Long, and read once -- * so it gets reading measure and room to breathe rather than table density. */ .waiver-text { max-width: 68ch; line-height: 1.6; } /* --- Stays, folded by time. Sep 5, 2026. ------------------------------ * A month is a month for everybody; ten stays is right for one client and * absurd for the next. Closed by default, opens in place. */ details.folded { border-top: 1px solid var(--line); } details.folded > summary { cursor: pointer; padding: 10px 2px; list-style: none; display: flex; align-items: center; gap: 8px; } details.folded > summary::-webkit-details-marker { display: none; } details.folded > summary::before { content: "\25B8"; font-size: 11px; opacity: .6; transition: transform .12s; } details.folded[open] > summary::before { transform: rotate(90deg); } details.folded.inner { border-top: 0; margin-left: 14px; } /* =========================================================================== THE CLIENT'S FRONT DOOR (body.my-door) Sep 5, 2026 Deliberately quiet. This page has one job -- get a client into their account -- and everything on it that is not that job is competing with it. The background image asked for lands here later: one photograph, with a wash between it and the text. The wash is a layer rather than an edit to the photo, so it can be tuned in seconds and the original stays original -- and dark mode gets its own wash over the same file rather than a second picture. =========================================================================== */ /* ⭐ THE CARD SITS LEFT, NOT CENTER. Sep 5, 2026, a correction made after seeing it live -- the kind of rework that is fair: an idea can be great at first, and then you see it in reality. The first version centered the card, which put it straight over the dog: "most of his body ended up behind the sign in screen." Moving the card is the fix rather than moving the photograph, because it is also the better layout -- a card on one side and the picture breathing on the other. Her reason for LEFT specifically, and it decides nothing else: "so that you can see all four feet are off the ground." On a phone the card is full width whatever this says, so the rule only applies once there is room for both. */ /* The door page was a flex box that centered the card over a full-page photograph. That whole idea was replaced by the band below, and leaving the old rule here meant two rules fighting -- the later one winning by accident rather than by intent. */ body.k9-preview .door-page { max-width: 460px; width: 100%; padding: 32px 20px 64px; } /* ⭐⭐ THE PHOTOGRAPH IS A BAND ACROSS THE TOP, NOT A BACKGROUND BEHIND EVERYTHING -- and getting here took four looks at the live page. 1. CENTERED card: "most of his body ended up behind the sign in screen." 2. LEFT: head and chest clear, "but that back foot is being covered." 3. LOW, frame lifted: right on one window and wrong on the next -- one screen was much wider than tall, another nearly square, and the crop moved him under the card again. THE LESSON, AND IT IS THE ONLY REASON THIS COMMENT IS LONG: he runs the FULL WIDTH of that frame, tail at one edge and nose near the other. On a full-bleed background there is NO window shape where a centered card misses him. Three rounds were spent nudging percentages at a problem that had no solution in that shape. Tuning it for one screen guaranteed breaking it on the next. So the picture stopped being a background. It is a band across the top and the card sits on solid ground beneath it, which means the dog is never behind anything -- on any window, on any phone, at any zoom. The wash on the band drops to 0.28 because nothing is written over it any more. ⭐ THE GENERAL RULE: when a fix has to be re-tuned for each viewport, the layout is wrong, not the numbers. */ body.k9-preview.my-door { display: block; min-height: 100vh; } /* ⭐⭐ THE BAND TAKES THE PICTURE'S OWN SHAPE, CAPPED. Sep 6, 2026, and it is the fifth arrangement of this one photograph. WHAT WAS WRONG. The band used to take whatever height was left over after the card's room was reserved: max(180px, 100vh - 700px). On a tall window that left about 450px and the dog fitted. On a laptop it collapsed onto the 180px floor -- and because the photograph still filled the WIDTH, a 180px window onto a 576px-tall picture cut off everything above it. His whole head and shoulders. Her words, Sep 6: "if I have it open on my laptop, it kinda cuts off his head a little bit." ⭐ WHY THE FOCAL POINT WAS NOT THE FIX. background-position only chooses WHICH slice of the picture a too-short band shows. He fills that frame nose to tail, so moving it up would have bought his head by losing his feet -- the same trade the three earlier rounds kept making. THE HEIGHT WAS THE FAULT, NOT THE FRAMING. WHAT IT IS NOW. The band is a real in the flow at its own aspect ratio, so the browser does the arithmetic and the whole animal is there at every width. Nothing in this file knows or cares that Kawa's photograph is 2.5:1 -- a facility that uploads a square one gets a square band. There is no number here to get wrong for the next facility, which is the same reason the temperament list and the play areas are data and not code. ⭐ THE CAP IS THE ONLY JUDGMENT ON THIS PAGE, and it was made looking at both: 55vh, so a big picture can never push the sign-in form off the bottom of a short window. When the cap bites it crops from the BOTTOM -- his head, his collar and his tail stay, and his back feet go. She chose that over the whole dog with the email box below the fold. */ body.k9-preview.my-door .door-band { position: relative; max-height: 55vh; overflow: hidden; } body.k9-preview.my-door .door-band img { display: block; width: 100%; height: auto; } /* The card sits close under the band, brought up a little higher as asked. The band is in the flow now, so "under it" needs no arithmetic and the two can no longer drift apart at all. */ body.k9-preview.my-door .door-page { margin: 0 auto; padding-top: 10px; padding-bottom: 16px; } body.k9-preview.my-door .door-logo { max-height: 52px; } body.k9-preview.my-door .door-brand { margin: 0 0 10px; } body.k9-preview.my-door .door-brand h1 { margin-top: 4px; font-size: 21px; } body.k9-preview .door-brand { text-align: center; margin-bottom: 22px; } body.k9-preview .door-logo { max-height: 96px; max-width: 100%; } body.k9-preview .door-mark { font-size: 44px; line-height: 1; } body.k9-preview .door-brand h1 { margin: 10px 0 0; font-size: 26px; } body.k9-preview .door-card { margin-bottom: 16px; } body.k9-preview .door-card .field { margin-bottom: 14px; } body.k9-preview .door-card label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--pk-2); } /* ⚠️ EVERY TYPE THE DOORS ACTUALLY USE, and it is a list because CSS cannot ask. It was email and password only until Sep 6, when the second door arrived with names and a phone number -- and those three boxes rendered stark white on the dark card, because an unlisted type gets the browser's own styling and nothing else. The suite could not see it: every test asserted the fields were THERE, and they were. It was found by rendering the live page and looking at it, which is the standing rule for anything about how something looks. `NoUnstyledBoxOnADoor` now walks both door forms and fails if a widget renders a type this rule does not name. */ body.k9-preview .door-card input[type="email"], body.k9-preview .door-card input[type="password"], body.k9-preview .door-card input[type="text"], body.k9-preview .door-card input[type="tel"] { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--pk); } body.k9-preview .door-go { width: 100%; padding: 11px 14px; font: inherit; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer; background: var(--brand-fill); color: var(--on-fill); } body.k9-preview .door-go:hover { filter: brightness(1.08); } /* The second door's button on the sign-in page. Same shape, less shout -- it is an alternative, not the thing most people came here to press. */ body.k9-preview .door-go-quiet { display: block; text-align: center; text-decoration: none; margin-top: 4px; background: transparent; color: var(--accent); border: 1px solid var(--accent); } /* ⛔ THE FIELD NOBODY SEES, AND WHY IT IS NOT display:none. Some robots skip a hidden input and fill one that is merely moved away, so this is positioned off the page instead. aria-hidden and tabindex keep it away from a screen reader and from anybody working by keyboard, which is the difference between a trap for robots and an obstacle for people. */ body.k9-preview .door-card input[name="website"] { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* A REFUSAL IS NOT FINE PRINT. The whole reason this page exists is that KennelBooker put the useful sentence in "really, really small letters". */ body.k9-preview .door-problem { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.45; background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); } body.k9-preview .door-quiet { opacity: 0.92; } /* A TAG OR A CODE, at the facility only (Q230, 16 Oct 2026). Under the password, the same card; the code box and its button share one line. */ body.k9-preview .door-tap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); } body.k9-preview .door-code { display: flex; gap: 8px; align-items: center; } body.k9-preview .door-code .door-code-box { flex: 1 1 auto; min-width: 0; } body.k9-preview .door-code .door-go { width: auto; flex: none; } /* THE WASH OVER THE PHOTOGRAPH. Sep 5, 2026; moved inside the band Sep 6. A picture behind the sign-in page was asked for, so it is not so plain -- and the dogs in it are black Labradors, so the instinct was to lighten the photographs themselves: "the pictures would have to be lightened a whole bunch." That bakes a choice into the files and cannot be taken back without re-editing every one of them. ⭐ SO THE WASH IS A LAYER AND NEVER AN EDIT. The file on disk is untouched, this value can be tuned in a second, and dark mode reverses over the SAME picture rather than needing a second set. It is its own element sitting on top of the image -- never a filter on the image -- so either can change without the other. It moved from the page to the band because the picture did. Same layer, same file, same value; it just belongs to the photograph now, which means it can never be a different height from the thing it is washing. */ body.k9-preview.my-door .door-band::after { content: ""; position: absolute; inset: 0; background: rgba(19, 23, 26, 0.28); } /* The cards lift off the photograph rather than floating on it. */ body.k9-preview.my-door .door-card { box-shadow: 0 2px 14px rgba(0,0,0,.10); } /* The facility's copyright, on every client page. Quiet, and readable over the photograph on the sign-in door as well as over a plain page. */ body.k9-preview .my-footer { padding: 18px 20px 26px; text-align: center; font-size: 12.5px; color: var(--pk-3); } body.k9-preview.my-door .my-footer { padding: 6px 20px 18px; } /* --------------------------------------------------------------------- REQUEST SENT. Sep 6, 2026. ⭐ THE ANSWER HAS TO BE UNMISSABLE, and the reason is operational rather than decorative. A client who hits Send on a form that refuses silently assumes it did not work and presses it again, maybe ten times. Ten presses is ten requests for somebody to sort out at the other end. --------------------------------------------------------------------- */ body.k9-preview .sent-card { text-align: center; } body.k9-preview .sent-tick { width: 56px; height: 56px; margin: 4px auto 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); font-size: 30px; line-height: 54px; } body.k9-preview .sent-card .door-go { margin-top: 16px; } /* --------------------------------------------------------------------- ONE PRESS IS ONE REQUEST. Sep 6, 2026. The confirmation page above answers a client who waited. This answers the one who did not: between the press and the new page there was nothing at all, so the button still looked pressable and a slow connection turned one request into several. A pressed button must stop looking like a button. --------------------------------------------------------------------- */ body.k9-preview button[disabled], body.k9-preview input[type="submit"][disabled] { opacity: 0.55; cursor: default; filter: none; } body.k9-preview .door-go[disabled]:hover { filter: none; } /* --------------------------------------------------------------------- THE BOOKINGS PAGE. Sep 6, 2026. ⭐ This page was asked for in this stylesheet by name, with the layout taken from the old software's page that was sent as a reference and nothing else taken from it. The standing rule, Sep 4: "I don't give a hoot on how they did it ... what I want you to look at is the container that everything sits in and how it's laid out." --------------------------------------------------------------------- */ body.k9-preview .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; } body.k9-preview .page-head h1 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.01em; margin: 0; color: var(--pk); } body.k9-preview .page-head-sub { font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; color: var(--pk-3); margin: 6px 0 0; } /* ---- the kind tabs. Links, because each one is its own query ---- */ body.k9-preview .kind-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); } body.k9-preview .kind-tab { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; padding: 11px 15px; color: var(--pk-2); text-decoration: none; border-right: 1px solid var(--line); } body.k9-preview .kind-tab:hover { color: var(--pk); } body.k9-preview .kind-tab.on { background: var(--surface); color: var(--pk); box-shadow: inset 0 2px 0 var(--accent); } /* ---- and the second strip: which of them, not which kind ---- */ body.k9-preview .view-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 14px; } body.k9-preview .view-pill { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--pk-2); text-decoration: none; background: var(--surface); } body.k9-preview .view-pill:hover { border-color: var(--accent); color: var(--pk); } body.k9-preview .view-pill.on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-fill); } /* ---- the rows ---- */ body.k9-preview .booking-rows td { vertical-align: top; } body.k9-preview .booking-row { cursor: pointer; } body.k9-preview .booking-row:hover { background: var(--surface-2); } body.k9-preview .booking-rows .num { text-align: right; white-space: nowrap; } body.k9-preview .booking-rows .who a { font-weight: 600; } body.k9-preview .booking-rows .when-time { color: var(--pk-3); font-size: 12.5px; } body.k9-preview .booking-rows .due { color: var(--pk-2); } body.k9-preview .dogs-count { font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--pk-3); margin-bottom: 5px; } /* ⭐ ONE GRID, SO THE COLUMNS LINE UP DOWN THE PAGE. Sep 3, 2026, and the reason is hers: "The names all need to start from a left justified. The canines all need to be from a left justified ... otherwise, my OCD is gonna kill me because they're not lined up." Ragged, you have to read every line; aligned, you can run your eye down it and check six dogs are in six runs. */ body.k9-preview .dog-row { display: grid; grid-template-columns: 4px 26px minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) auto; align-items: center; gap: 0 9px; padding: 2px 0; } body.k9-preview .dog-row .dog-line-room { font-family: "IBM Plex Mono", monospace; color: var(--pk-2); font-size: 12px; white-space: nowrap; } /* The bar is the dog's temperament color and the color arrives inline, because what each of the ten means is the facility's to write down. */ body.k9-preview .temp-bar { width: 4px; align-self: stretch; min-height: 20px; border-radius: 2px; } body.k9-preview .temp-bar.untinted { background: var(--line-2); } body.k9-preview .dog-row .dog-photo img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid var(--line); } body.k9-preview .dog-row .pet-chip-noimg { width: 26px; height: 26px; border-radius: 50%; display: block; background: var(--surface-2); border: 1px solid var(--line); text-align: center; line-height: 24px; font-size: 13px; } body.k9-preview .dog-row .dog-name { font-weight: 600; } body.k9-preview .dog-row .dog-line-breed { color: var(--pk-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.k9-preview .dog-row .dog-codes { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; min-width: 0; justify-content: flex-end; } /* ⛔ 28 Sep 2026. A CODE BADGE WAS DRAWN OVER A DOG'S NAME. Found live on the bookings list: "there's something on top of Clementine's name that I can't read." The row is a grid whose name and room columns may shrink below their content, and a badge is an OPAQUE box in the last column — so a tight row overflowed its text and the badge painted on top of it. Nothing here may overflow its own column. */ body.k9-preview .dog-row > * { min-width: 0; } body.k9-preview .dog-row .dog-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.k9-preview .dog-row .code-badge-sm, body.k9-preview .dog-row .hand-mark { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⛔ 29 Sep 2026, the same fault one column over. The room was the one text in the row with nowrap and nothing clipping it, so it ran past its own column and the opaque badge beside it painted on top. Every text in this row is now cut off at its own edge. */ body.k9-preview .dog-row .dog-line-room { overflow: hidden; text-overflow: ellipsis; } /* Training reads its place in its own column, so the row has one less. */ body.k9-preview .dog-row.no-room { grid-template-columns: 4px 26px minmax(0, max-content) minmax(0, 1fr) auto; } body.k9-preview .where-col { white-space: normal; } /* Buttons in a card heading are one group at the right, not scattered. */ body.k9-preview .head-doors { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; } /* The week: seven days across, the facility's hours down. */ body.k9-preview .hour-grid { width: 100%; table-layout: fixed; } body.k9-preview .hour-grid th { font-size: 11.5px; color: var(--pk-2); font-weight: 600; padding: 5px 4px; text-align: left; border-bottom: 1px solid var(--line); } body.k9-preview .hour-grid th.today a { color: var(--accent); } body.k9-preview .hour-grid .hour-col { width: 62px; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--pk-3); font-weight: 400; vertical-align: top; border-bottom: 0; border-right: 1px solid var(--line); } body.k9-preview .hour-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); height: 34px; vertical-align: top; padding: 2px 3px; } body.k9-preview .hour-grid td.today { background: var(--surface-2); } /* The band only draws when something is in it -- she does not schedule without a time, and an empty band would be furniture on her page. */ body.k9-preview .hour-grid .loose-band td { background: var(--surface-2); } /* A block that spans hours is one cell, filled, labelled once. */ body.k9-preview .hour-grid td.taken { padding: 0; } body.k9-preview .hour-grid td.taken .hour-item { height: 100%; white-space: normal; border-radius: 0; margin: 0; padding: 3px 5px; background: var(--surface-2); } body.k9-preview .hour-when { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--pk-3); } body.k9-preview .hour-item { display: block; font-size: 11.5px; line-height: 1.3; margin-bottom: 2px; padding: 1px 4px; border-radius: 3px; background: var(--surface); border-left: 2px solid var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A month is a grid. Seven columns, weeks down, the days either side of the month drawn quietly so the shape of the month is readable. */ body.k9-preview .month-grid { width: 100%; table-layout: fixed; } body.k9-preview .month-grid th { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--pk-3); padding: 6px 4px; text-align: left; } body.k9-preview .month-grid td { border: 1px solid var(--line); vertical-align: top; height: 92px; padding: 4px 5px; overflow: hidden; } /* One week gets the room a month cannot spare. */ body.k9-preview .month-grid.one-week td { height: 260px; } body.k9-preview .month-grid td.outside { background: var(--surface-2); } body.k9-preview .month-grid td.outside .month-day { color: var(--pk-3); } body.k9-preview .month-grid td.today { border-color: var(--accent); } body.k9-preview .month-day { display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 12px; text-decoration: none; margin-bottom: 3px; } body.k9-preview .month-item { display: block; font-size: 11.5px; line-height: 1.3; margin-bottom: 2px; padding: 1px 4px; border-radius: 3px; background: var(--surface-2); border-left: 2px solid var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.k9-preview .month-at { font-family: "IBM Plex Mono", monospace; color: var(--pk-3); } /* Each item is the door to changing it (13 Oct 2026). */ body.k9-preview a.hour-item, body.k9-preview a.month-item { color: inherit; text-decoration: none; cursor: pointer; } body.k9-preview a.hour-item:hover, body.k9-preview a.month-item:hover, body.k9-preview a.hour-item:focus-visible, body.k9-preview a.month-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Past ten people the ticks become the dog field's type-ahead. */ body.k9-preview .who-pick { position: relative; display: block; } body.k9-preview .who-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } body.k9-preview .who-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px 2px 10px; font-size: 13px; } body.k9-preview .who-off { background: none; border: 0; color: var(--pk-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; } body.k9-preview .who-off:hover { color: var(--ink); } body.k9-preview .who-ticks { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } body.k9-preview .who-ticks label { font-weight: normal; white-space: nowrap; } /* The second container on Upcoming: booked, nobody has set the days. */ body.k9-preview .undated-rows { margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--line); } body.k9-preview .undated-rows h3 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--pk-2); margin: 0 0 4px; } body.k9-preview .undated-rows h3 .n { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0; color: var(--pk-3); } body.k9-preview .rows-note { margin: 12px 0 2px; } @media (max-width: 800px) { body.k9-preview .dog-row, body.k9-preview .dog-row.no-room { grid-template-columns: 4px 26px 1fr auto; } body.k9-preview .dog-row .dog-line-breed { display: none; } /* The codes take a line of their own rather than fight the name for one. */ body.k9-preview .dog-row .dog-codes { grid-column: 3 / -1; justify-content: flex-start; } } /* ---- what a search turns up, when it is not one thing ---- */ body.k9-preview .found-rows tr { cursor: pointer; } body.k9-preview .found-rows tr:hover { background: var(--surface-2); } body.k9-preview .found-rows a { font-weight: 600; } body.k9-preview .found-rows tr.only-dog { cursor: default; } body.k9-preview .found-rows tr.only-dog:hover { background: none; } body.k9-preview .found-rows tr.only-dog .cl-face { vertical-align: middle; margin-right: 8px; } body.k9-preview .put-away { font-family: "Barlow Semi Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--pk-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; margin-left: 6px; } /* ========================================================================= ⭐⭐ THE PAINT LAYER — Sep 6, 2026. On the pages staff open every morning: "we need to get it in our style sheet or at least our colors and stuff." And on the calendar specifically: "you've already worked the calendar exactly how I want it. It really doesn't need to change other than the colors." ⭐ A PAINT JOB IS NOT A REDESIGN, and this block is what makes that true. The old look is drawn with app.css's variable names -- --ink, --muted, --bg, --card, --border, --warn-bg. The new look defines its own -- --pk, --pk-3, --ground, --surface, --line, --amber-soft -- and never touched the old ones. So a page that got the new shell kept app.css's LIGHT values on the new dark ground: black text on a black card, which is exactly the failure named on the very first preview -- "a dark record under a blue bar is two products stitched together." ⭐ SO THE OLD NAMES ARE POINTED AT THE NEW PALETTE, once, here. A page joins the design language by adding two lines -- the body class and the head include -- and every card, border, muted line and warning box on it follows the theme, in light and dark, without touching its markup. ⚠️ THIS IS A BRIDGE, NOT A DESTINATION. A page that has been properly redrawn uses the new names directly and needs none of this. What it buys is that a page nobody has redrawn yet stops looking like a different product the moment it is asked to. ========================================================================= */ body.k9-preview { --ink: var(--pk); --muted: var(--pk-3); --bg: var(--ground); --card: var(--surface); --border: var(--line); --warn-bg: var(--amber-soft); --warn-text: var(--amber); /* The brand family. The bar keeps its own treatment; everything else that reached for green now reaches for the accent, which is theme-aware. */ --green-dark: var(--accent); --green: var(--accent); --green-light: var(--accent-soft); --on-brand: var(--on-fill); } /* --------------------------------------------------------------------------- ⛔⛔ THE BUTTONS WITH NO WORDS ON THEM. Sep 8, 2026. Hunting for the control that finishes a booking: "I had no idea how to finish the booking to get me to the next page... I can't read either the two green buttons that I pushed. So I pushed the first one. Not even sure what it was for." Measured on the live page rather than reasoned about: a.btn -> background rgb(127,192,162) color rgb(127,192,162) THE SAME COLOR. The text was there the whole time, painted exactly the shade of the button under it. ⭐ TWO CORRECT RULES, MULTIPLIED. The shim above maps --green-dark onto the accent so a page nobody has redrawn stops looking like a different product. `body.k9-preview a { color: var(--accent) }` colors links with that same accent. app.css says `.btn { background: var(--green-dark); color: #fff }` -- and `body.k9-preview a` (0,1,2) outranks `.btn` (0,1,0), so the white lost and the label became the background. ⚠️ AND IT ONLY EVER HIT LINKS. A