/* Flit app shell + client file. Tokens taken from deliverables/product/Flit.dc.html. */
:root {
--ink:#4a3f3a; --serif:#6d5147; --muted:#9a8a82; --faint:#b7a89f; --soft:#a89890;
--line:#f0e8e3; --field:#eadfd8; --bar:#8a5a3f; --brown:#8a5a3f; --deep:#3f342f;
--rose:#a86e6e; --rose-2:#c08f8f; --terra:#c08f5f; --header-txt:#6d5147;
--tablehead:#b98d90; --card:#fff; --wash:#faf6f3; --wash-2:#f4ede9;
--shadow:0 10px 26px rgba(120,90,80,.10);
--navh:112px; /* bottom nav height, used to run the client file under it */
/* The wordmark keeps the serif: a logotype is a drawing, and it is what makes Flit recognisable.
Everything else is set in the sans, which reads faster on a tablet held at arm's length and
keeps the interface out of the way of the work. */
--logo-font:'Playfair Display', Georgia, serif;
--sans:'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
--serif-font:var(--sans);
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
font-family:var(--sans); font-weight:400; color:var(--ink);
background:linear-gradient(165deg, #ffffff, #fefcfb 55%, #fffefe);
background-attachment:fixed;
-webkit-user-select:none; user-select:none;
}
h1,h2,h3 { font-family:var(--sans); color:var(--serif); font-weight:600; letter-spacing:-.015em; margin:0; }
.hidden { display:none !important; }
input, textarea, button { font-family:inherit; }
/* App frame, like the mockup: a fixed-height column. The header and the bottom nav never move,
and the content scrolls in the band between them. It does not slide under the nav.
Sized with 100lvh, the LARGE viewport: on an installed iPhone that is the whole screen, edge to
edge, home-indicator strip included, so the white nav reaches the very bottom with no beige gap
below it. It was measured to be the one stable height on the device (852px, never moved), unlike
100dvh which iOS mis-measures on the first paint; position:fixed;inset:0 was stable too but iOS
would not extend it under the home indicator, leaving that strip showing the page background.
The vh line is the fallback for engines without lvh. */
.app { position:relative; margin-inline:auto; max-width:1024px;
height:100vh; height:100lvh;
display:flex; flex-direction:column; overflow:hidden; }
/* ---- header ---- */
.header {
/* Installed full screen, the gradient runs up behind the status bar (safe-area top), and the
logo and name stay centred in the 96px band below it. */
flex:none; height:calc(96px + env(safe-area-inset-top));
padding:env(safe-area-inset-top) 28px 0;
display:flex; align-items:center; justify-content:space-between;
background:linear-gradient(105deg, #6f4f4d, #8a6660 32%, #b48f77 68%, #caa588);
border-radius:0 0 28px 28px; box-shadow:0 14px 30px rgba(120,86,74,.22);
z-index:40;
}
.logo { display:flex; align-items:center; gap:12px; }
.logo .word { font-family:var(--logo-font); font-size:36px; color:#fff; letter-spacing:.02em; }
/* The page name in the header, shown only on a laptop (see the min-width:1025 block). */
.pagetitle { display:none; }
.who { display:flex; align-items:center; gap:16px; }
.who .name { font-size:20px; font-weight:600; color:#fff; }
.avatar { width:56px; height:56px; border-radius:50%; border:3px solid rgba(255,255,255,.85);
background:#efe3dd; color:#8a5a3f; display:flex; align-items:center; justify-content:center;
font-weight:600; font-size:20px; cursor:pointer; }
/* ---- content: the scrolling band between header and nav ---- */
/* The band runs to the bottom of the frame and the nav floats over it, so a page scrolls *under*
the menu instead of stopping at its edge. The nav plate is transparent above its curve: with the
content stopping short, that strip showed the page background as a beige band across the screen. */
.content { flex:1; min-height:0; display:flex; flex-direction:column;
overflow-y:auto; overflow-x:hidden;
padding:22px calc(26px + env(safe-area-inset-right)) calc(var(--navh) + env(safe-area-inset-bottom) + 26px) calc(26px + env(safe-area-inset-left)); }
/* ---- bottom nav ---- */
.nav { position:absolute; left:0; right:0; bottom:0; height:var(--navh); pointer-events:none; z-index:45; }
/* The floating pill is the menu everywhere now, phone, tablet and desktop: the swoop is retired. A
light translucent rounded bar of the four icons, centred, with the Flit action button as a
separate circle just to its right. The phone block below anchors the same two pieces to the left
and the far right instead of centring them. Centring math: group = pill 460 + gap 14 + circle 68 =
542, so the pill starts at 50% - 271 and the circle at 50% + 203 (= 271 - 68). */
.nav .plate, .plate-soft, .plate-tight { display:none; }
.nav .items { position:absolute; left:calc(50% - 271px); right:auto; bottom:calc(env(safe-area-inset-bottom) + 28px);
width:460px; height:66px; display:flex; align-items:center; justify-content:space-between;
padding:0 40px; pointer-events:auto;
background:rgba(252,249,247,.66); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.55); border-radius:33px; box-shadow:0 12px 28px rgba(120,90,80,.18); }
.nav .items > button { background:none; border:0; cursor:pointer; padding:8px; line-height:0; }
.nav .spacer { display:none; }
.nav .feather { position:absolute; left:calc(50% + 203px); right:auto; top:auto; transform:none; cursor:pointer;
bottom:calc(env(safe-area-inset-bottom) + 28px);
pointer-events:auto; width:68px; height:68px; border-radius:50%;
background:linear-gradient(115deg, #6d4a49 0%, #8a604f 46%, #c39c7b 100%);
display:flex; align-items:center; justify-content:center;
box-shadow:0 12px 24px rgba(110,69,53,.34); }
/* The Flit wordmark in the round button, white on the brand gradient, filling most of it. */
.feather-logo { width:54px; height:54px; object-fit:contain; }
/* Portrait tablet: the fixed 460px group centred leaves wide side margins and reads as a small
island. Stretch it across the width (left-anchored, feather to the far right) so it feels like a
bar, not a cluster. Landscape keeps the centred group (the base rule) untouched. */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
.nav .items { left:64px; right:150px; width:auto; }
.nav .feather { left:auto; right:64px; }
}
/* Both bars were drawn for the tablet mockup: a 96px header, a 104px button in a 112px bar. Held at
arm's length on an iPad those are right; on a 390px phone the same absolute sizes swallow the
screen, and the round button covers the text above it. On a phone the whole chrome scales down,
which is also what lifts the content up. */
@media (max-width: 640px) {
.header { height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0;
border-radius:0 0 20px 20px; box-shadow:0 10px 22px rgba(120,86,74,.18); }
.logo .word { font-size:24px; }
.who { gap:9px; }
.who .name { font-size:15px; }
.avatar { width:36px; height:36px; font-size:14px; border-width:2px; }
:root { --navh:96px; } /* room the content reserves at the bottom for the floating bar */
/* Floating pill nav (from Choumous's mockup), replacing the swoop on the phone: a light translucent
rounded bar holding the four icons, with the Flit action button as a separate circle on its right.
A plain rectangle floating above the home indicator is far more predictable than the stretched
swoop: the icons space evenly inside it, none can fall into a curve, and the whole safe-area
question is one bottom-margin rule. The swoop stays on tablet and desktop (the base rules). */
.nav .plate { display:none; } /* no swoop on the phone */
.nav .spacer { display:none; } /* the centre gap only existed for the old centred button */
.nav .items {
left:16px; right:88px; width:auto; /* wide, left-anchored; the Flit circle takes the room on the right */
bottom:calc(env(safe-area-inset-bottom) + 18px);
height:60px; padding:0 24px;
background:rgba(252,249,247,.66);
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.55);
border-radius:30px;
box-shadow:0 12px 28px rgba(120,90,80,.18);
justify-content:space-between;
}
.nav .items > button { padding:6px; }
.nav .items > button svg { width:26px; height:26px; }
.nav .feather {
left:auto; right:16px; top:auto;
bottom:calc(env(safe-area-inset-bottom) + 18px);
width:64px; height:64px; transform:none;
box-shadow:0 12px 24px rgba(110,69,53,.34);
}
.feather-logo { width:52px; height:52px; }
}
/* ============================ RESPONSIVE FOUNDATION ============================
One set of breakpoints for the whole app, so every screen bends at the same widths:
phone : up to 640px (a lash artist working mobile, try-on like a filter)
tablet : 641 to 1024px (the studio device, the design target, the default)
desktop : 1025px and up (finances and admin, where the extra width earns its keep)
The tablet layout is the base every other rule sits on; phone and desktop only add to it. */
@media (min-width: 1025px) {
/* Laptop layout: a full-width header carrying the page name, a vertical rail of icons down the
left with the larger try-on button at its foot, and the content sitting to the right of the
rail. Phone (<640) and tablet (640-1024) are untouched: they keep the floating bottom pill. */
.app { max-width:none; --navh:0; } /* full width; no bottom bar to clear anywhere */
/* Header: page name (uppercased) on the left, who she is on the right. The Flit wordmark leaves
the header and lives in the try-on button at the foot of the rail. Indented to line up over the
content, past the rail. */
.header { border-radius:0; padding-left:134px; padding-right:44px; }
.logo .word { display:none; }
.pagetitle { display:block; font-size:28px; font-weight:400; color:#fff;
text-transform:uppercase; letter-spacing:.03em; line-height:1; }
.who .name { font-size:20px; }
/* The rail: the icon pill, then the try-on circle just below it, both centred on the same axis.
A flex column so the circle rides right under the pill, detached but close, rather than pinned
to the bottom of the screen. Kept modest so it sits in scale with the content. */
/* Top follows the header down when a device adds a safe-area inset (an installed iPad in landscape),
so the rail never ends up glued under a taller header. On a Mac the inset is 0, so it is unchanged. */
.nav { top:calc(120px + env(safe-area-inset-top)); right:auto; left:0;
bottom:calc(28px + env(safe-area-inset-bottom)); width:116px; height:auto;
display:flex; flex-direction:column; align-items:center; gap:18px; }
.nav .items { position:static; flex:1 1 auto; flex-direction:column; justify-content:space-evenly;
align-items:center; width:64px; padding:22px 0; border-radius:34px; }
.nav .items > button { padding:8px; }
.nav .items > button svg { width:24px; height:24px; }
.nav .feather { position:static; flex:none; width:76px; height:76px; }
.feather-logo { width:56px; height:56px; }
/* Content clears the rail on the left; there is no bottom bar to clear. */
.content { padding:24px 44px 32px 134px; }
/* The header already names the page, so drop the in-content page title (inside .listhead) to
avoid saying it twice. Sub-section headers inside a screen (Medical Info, Lash Mapping…) stay,
since they are not the page title. */
.listhead .section { display:none; }
/* Settings has its own gear in the rail on a laptop, so it leaves the profile panel here. */
.pitem[data-p="settings"] { display:none; }
/* Note: the Home breakdown/tray row layout lives in its own min-width block further down, after the
Home base styles, so it is not overridden by them (this block sits above them in the file). */
}
/* The rail's Settings gear is a laptop-only affordance: on phone and tablet Settings stays in the
profile panel, and the floating pill keeps its four icons. */
@media (max-width: 1024px) {
.nav .items > .nav-settings { display:none; }
}
/* ---- clients list ---- */
.listhead { display:flex; align-items:baseline; gap:14px; margin:0 4px 14px; flex-wrap:wrap; }
.listhead .back { margin-left:auto; align-self:center; }
.listhead .section { margin:0; }
.listhead .count { color:var(--muted); font-size:17px; }
.searchbar { display:flex; align-items:center; gap:16px; }
.search { flex:1; display:flex; align-items:center; gap:12px; background:var(--card);
border-radius:40px; padding:14px 24px; box-shadow:0 8px 20px rgba(120,90,80,.08); }
.search input { flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:18px; color:var(--ink); }
.sortwrap { flex:none; display:flex; align-items:center; gap:10px; background:var(--card); border-radius:40px;
padding:0 18px 0 22px; height:60px; box-shadow:0 8px 20px rgba(120,90,80,.08); }
.sortwrap label { color:var(--muted); font-size:16px; white-space:nowrap; }
.sortsel { border:0; outline:0; background:transparent; font:inherit; font-size:17px; color:var(--ink); cursor:pointer; }
.add { width:60px; height:60px; flex:none; border-radius:50%; border:0; cursor:pointer; color:#fff; font-size:30px;
background:linear-gradient(115deg, #6d4a49 0%, #8a604f 46%, #c39c7b 100%); box-shadow:0 8px 20px rgba(120,74,73,.32);
display:flex; align-items:center; justify-content:center; }
.table { margin-top:20px; background:var(--card); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.thead, .trow { display:grid; grid-template-columns:1.35fr 1.05fr .85fr 1.05fr .9fr; align-items:center; }
.thead { background:linear-gradient(115deg, #6d4a49 0%, #8a604f 46%, #c39c7b 100%); color:#fff; font-size:17px; font-weight:500; }
.thead > div { padding:15px 16px; }
.thead .c { text-align:center; }
.trow { border-top:1px solid var(--line); cursor:pointer; }
.trow:hover { background:var(--wash); }
.trow > div { padding:18px 16px; font-size:19px; }
/* Sortable column titles: click to sort, click again to flip. The chevron marks which is active. */
.thead [data-sort] { cursor:pointer; -webkit-user-select:none; user-select:none; }
.thead [data-sort]:hover { color:#ffe9e4; }
.sarr { display:inline-block; margin-left:5px; font-size:13px; opacity:.5; vertical-align:middle; }
.th-sm { display:none; }
.thead [data-sort].sorted .sarr { opacity:1; }
/* The delete affordance rides in its own column, hidden until the phone layout turns it on. */
.trashcell, .thtrash { display:none; }
.trash { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
border:0; background:none; color:#c48f8a; cursor:pointer; border-radius:9px; }
.trash:hover, .trash:active { background:rgba(179,84,63,.12); color:#b3543f; }
/* Archived clients read dimmer, and a link under the list switches between active and archived. */
.trow.archived { opacity:.6; }
.trow.archived .name { font-style:italic; }
.clients-arch { display:block; margin:16px auto 0; padding:8px 14px; background:none; border:0; cursor:pointer;
color:var(--terra); font:inherit; font-size:16px; font-weight:600; }
.clients-arch.hidden { display:none; }
.trow .name { padding-left:24px; }
/* The last-visit line under the name is a phone-only affordance; the tablet has its own Last-seen column. */
.trow .name-when { display:none; }
.trow .phone { font-size:17px; color:#6d5f57; white-space:nowrap; }
.trow .c { text-align:center; color:#6d5f57; font-size:17px; }
/* Money still owed reads at a glance, and says how many visits it spans: sitting right next to the
last service, a bare amount would be read as that service's price rather than the whole file. */
.thead .money em { display:block; font-style:normal; font-size:12px; font-weight:400; opacity:.75; margin-top:2px; }
.trow .money { border-left:1px solid var(--line); }
.owed { color:#b3543f; font-weight:600; }
.owed + .over { display:block; font-style:normal; font-size:12px; color:var(--soft); margin-top:2px; }
.settled { color:var(--faint); }
/* A service is named in four places; it wears the same colour in all of them. */
.pill { display:inline-block; padding:5px 14px; border-radius:999px; font-size:15px;
background:var(--c, var(--wash-2)); color:var(--ink, var(--bar)); font-weight:500; }
/* The last-seen date, tucked under the service pill on a phone only (see the phone list rules). On a
wider screen Last seen has its own column, so this copy stays hidden. */
.svc-when { display:none; }
.pdf { width:44px; height:44px; border-radius:50%; background:var(--wash-2); display:inline-flex;
align-items:center; justify-content:center; cursor:pointer; }
.empty { padding:70px 20px; text-align:center; color:var(--muted); font-size:18px; }
/* On a phone the client list stays a table, one line per client, but a narrow one: only Name, Last
service and Total owed fit legibly here. Phone and Last seen leave the list (both are one tap away
in the record). The column header stays, so the row reads without a legend. Search and the add
button share one row above it. */
@media (max-width: 640px) {
.searchbar { gap:12px; }
.sortwrap { display:none; }
/* min-width:0 is the whole fix: a flex item holding an will not shrink below the input's
own text width unless told it may, so on a real phone the search bar ran off the right edge and
shoved the + button off-screen. Now it shrinks and the + stays put. Compacter too: 16px text and
tighter padding read better at this size. */
.search { flex:1 1 auto; min-width:0; padding:12px 20px; }
.search input { min-width:0; font-size:16px; }
.add { width:54px; height:54px; font-size:27px; }
/* Four columns: the name, the last visit as its own dated column (tap the header to sort by it), what
they owe, and the X. The phone and last-service columns are dropped, since the file carries them.
Hidden cells: Phone (2) and Last service (4); Last visit (3) is now a column of its own. */
/* Each row is its own grid, so the last-visit and owed columns are fixed widths, not `auto`: with
`auto` an empty owed cell let the date slide right and the rows stopped lining up. Fixed widths
hold every date and amount in the same place down the whole list. */
.thead, .trow { grid-template-columns:minmax(0,1fr) 86px 74px 28px; }
.thead > :nth-child(2), .thead > :nth-child(4),
.trow > :nth-child(2), .trow > :nth-child(4) { display:none; }
.trow .c:nth-child(3) { font-size:13px; color:var(--soft); white-space:nowrap; text-align:center; }
.th-lg { display:none; }
.th-sm { display:inline; }
.thead > div, .trow > div { padding-left:9px; padding-right:9px; white-space:nowrap; }
.trashcell { display:flex; justify-content:center; padding:0; }
.thtrash { display:block; }
.thead { font-size:12.5px; }
.thead > div { padding:11px 14px; }
.thead .money, .trow .money { text-align:right; }
.thead .money em { display:none; }
.trow > div { padding:14px 14px; }
/* The last visit has its own column now, so the name is a single line again, no date beneath it. */
.trow .name { display:flex; align-items:center; padding-left:16px; }
.trow .name .nm { max-width:100%; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow .name-when { display:none; }
.trow .money { font-size:15px; border-left:0; }
.trow .money .over { display:none; }
/* Nothing owed shows nothing, not "All settled": only a real balance earns a line here. */
.trow .money .settled { display:none; }
}
/* ---- record ----
The client file is a fixed frame, not a page that grows. The card fills the band under the header
and runs to the bottom of the screen, behind the nav; only its body scrolls. Two consequences we
want: the side tabs keep the exact same size on every tab, short or long, and scrolling a long
page (Lash info, Consent) never moves the frame around it. */
.content:has(#view-record:not(.hidden)) { overflow:visible; padding-bottom:0; }
#view-record { position:relative; flex:1; min-height:0; }
.record { position:absolute; left:0; right:0; top:0; bottom:0;
background:var(--card); border-radius:26px 26px 0 0; box-shadow:var(--shadow); overflow:hidden;
display:flex; }
/* the spine and the tabs stay inside the visible band, never under the nav */
.spine { width:58px; flex:none; border-right:1px solid var(--line); display:flex; align-items:center;
justify-content:center; padding-bottom:var(--navh); }
.spine span { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--serif-font);
font-size:30px; letter-spacing:.18em; color:#7d5a45; white-space:nowrap; }
.rbody { flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; padding:22px 30px calc(var(--navh) + 24px); }
.recbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.back { display:inline-flex; align-items:center; gap:6px; color:var(--terra); cursor:pointer;
font:inherit; font-size:18px; background:none; border:0; }
.saved { font-size:14px; color:#8aa88f; opacity:0; transition:opacity .3s; }
.saved.on { opacity:1; }
.round-btn { width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; color:#fff; font-size:26px;
background:linear-gradient(115deg, #6d4a49 0%, #8a604f 46%, #c39c7b 100%); display:flex; align-items:center; justify-content:center; }
.rail { width:56px; flex:none; display:flex; flex-direction:column; padding-bottom:var(--navh); }
.rail .tab { flex:1; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
margin-left:10px; border-radius:14px 0 0 14px; opacity:.9; transition:margin .15s, opacity .15s; }
.rail .tab.active { margin-left:0; opacity:1; border-radius:16px 0 0 16px; box-shadow:-4px 0 12px rgba(90,60,40,.2); }
.rail .tab span { writing-mode:vertical-rl; transform:rotate(180deg); font-size:14px; font-weight:600;
letter-spacing:.14em; white-space:nowrap; }
/* Laptop: give each record tab room to breathe rather than dividing the height six ways. The rail
scrolls if the taller tabs run past the bottom -- she asked for that over cramped labels. */
@media (min-width: 1025px) {
/* Taller tabs so the vertical label is not cramped, and the rail scrolls past the bottom -- but no
gap between them: they stay a continuous strip, just taller. */
.rail { overflow-y:auto; overflow-x:visible; }
.rail .tab { flex:0 0 auto; min-height:168px; }
/* The record's + sits inline beside its search bar (as on the phone), not floating in a corner or
lost in the top bar. Show the inline one and drop the recbar + entirely on a laptop. */
.trecbar .trec-add { display:flex; width:44px; height:44px; font-size:24px; flex:none; }
#rec-action { display:none; }
}
/* On a phone the client file reclaims the ~58px the decorative left spine took: the open tab is
already named on the right rail, so the title on the edge is redundant here. The rail narrows a
little too, leaving the form the width it needs. */
@media (max-width: 640px) {
.spine { display:none; }
.rbody { padding:18px 18px calc(var(--navh) + 24px); }
.rail { width:46px; }
.rail .tab span { font-size:12px; letter-spacing:.1em; }
/* The phone treatment table is set further down, after the ≤720 rule, so its five-column grid wins
over that rule's nine columns at this width. */
}
h2.section { font-size:34px; margin-top:6px; font-weight:600; }
h3.sub { font-size:30px; margin-top:26px; }
.accent { border-left:3px solid var(--bar); padding-left:22px; margin-top:14px; }
.medtray-h { margin-top:32px; }
.maptray-h { margin-top:36px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
.f { display:flex; flex-direction:column; gap:3px; }
.f label { color:var(--muted); font-size:15px; }
.f .val { font-size:22px; color:var(--ink); min-height:30px; }
.f .val .k { color:var(--muted); }
.f input, .cell input, textarea.note-body, textarea.big {
border:0; border-bottom:1.5px solid var(--field); background:transparent; outline:0;
font:inherit; font-size:21px; color:var(--ink); padding:4px 0; transition:border-color .15s;
}
.f input:focus { border-color:var(--rose-2); }
.f.wide { grid-column:1 / -1; }
/* medical Q&A */
/* allergies: a full field, not a thin line, so it carries the weight of the Medical Info section
and holds more than one condition */
.allergy { max-width:640px; margin-bottom:20px; background:#faf4f1; border:1.5px solid var(--field);
border-radius:14px; padding:14px 18px; }
.allergy label { display:block; font-size:19px; color:var(--bar); font-weight:600; margin-bottom:6px; }
.allergy textarea { width:100%; border:0; outline:0; background:transparent; resize:none; font:inherit;
font-size:20px; color:var(--ink); line-height:1.4; }
.medq { max-width:640px; }
.medq .row { display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:21px; }
.medq .opts { display:flex; gap:26px; }
.medq .opt { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:19px; }
.box { width:26px; height:26px; border:2px solid var(--bar); border-radius:5px; background:#fff; }
.box.on { background:var(--bar); }
.medbox { max-width:640px; margin-top:8px; background:#faf4f1; border:1.5px solid var(--field);
border-radius:14px; padding:14px 18px; }
.medbox label { font-size:16px; color:var(--bar); font-weight:600; }
.medbox textarea { width:100%; border:0; outline:0; background:transparent; resize:none; font:inherit;
font-size:18px; color:var(--ink); line-height:1.5; margin-top:4px; }
/* chip fields (lash info), shown as compact dropdowns, laid out two per row */
.cfgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; }
.cfgrid .cf { margin-bottom:0; }
.cf { margin-bottom:12px; position:relative; }
.dd { display:flex; align-items:center; gap:16px; width:100%; text-align:left;
border:1.5px solid var(--field); border-radius:12px; background:#fff; padding:13px 18px;
font:inherit; cursor:pointer; transition:border-color .12s; }
.dd:hover { border-color:var(--rose-2); }
.dd.open { border-color:var(--bar); }
.dd-label { color:var(--muted); font-size:18px; min-width:118px; flex:none; }
.dd-val { flex:1; font-size:21px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-val.novalue { color:var(--faint); }
.dd-caret { color:var(--muted); font-size:14px; transition:transform .15s; }
.dd.open .dd-caret { transform:rotate(180deg); }
/* Floats over the fields below like a real menu, so opening one never pushes the layout. */
.dd-panel { position:absolute; top:100%; left:0; right:0; z-index:30; margin-top:6px; padding:14px 16px;
border:1.5px solid var(--field); border-radius:12px; background:#fff; box-shadow:0 14px 30px rgba(120,90,80,.18); }
.dd-panel.hidden { display:none; }
.pan-head { display:flex; justify-content:flex-end; margin:-4px 0 8px; }
/* a free-text field wearing the dropdown's clothes, so it lines up beside them */
.dd.dd-text { cursor:text; }
.dd.dd-text:focus-within { border-color:var(--bar); }
.dd-input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:21px; color:var(--ink); }
.cfgrid .tf { margin-top:0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
/* boxed text field (Product), so it reads as an input, not a separator line */
.tf { margin-top:12px; }
.tf label { display:block; color:var(--muted); font-size:18px; margin-bottom:6px; }
.tf-in { width:100%; border:1.5px solid var(--field); border-radius:12px; background:#fff;
padding:13px 18px; font:inherit; font-size:21px; color:var(--ink); outline:0; transition:border-color .12s; }
.tf-in:focus { border-color:var(--bar); }
.chip { font:inherit; font-size:18px; padding:8px 16px; border-radius:999px; cursor:pointer;
border:1.5px solid var(--field); background:#fff; color:var(--ink); transition:all .12s; }
.chip:hover { border-color:var(--rose-2); }
.chip.on { background:var(--bar); border-color:var(--bar); color:#fff; }
.chip.other { border-style:dashed; color:var(--muted); }
.chip.other.on { border-style:solid; }
.chip-in { display:block; margin-top:10px; max-width:360px; width:100%; border:0; border-bottom:1.5px solid var(--field);
background:transparent; outline:0; font:inherit; font-size:20px; color:var(--ink); padding:4px 0; }
.chip-in.hidden { display:none; }
/* tidy-up mode: every chip gets a x, and the values she retired come back greyed so she can undo */
.lnk { float:right; font:inherit; font-size:16px; border:0; background:none; cursor:pointer;
color:var(--bar); text-decoration:underline; padding:0; }
.chips.editing .chip { padding-right:10px; }
.chip .x { display:inline-block; margin-left:8px; width:22px; height:22px; line-height:20px; text-align:center;
border-radius:999px; background:rgba(0,0,0,.08); color:var(--muted); font-size:16px; vertical-align:middle; }
.chip.on .x { background:rgba(255,255,255,.25); color:#fff; }
.chip .x:hover { background:#c0392b; color:#fff; }
.chip.gone { border-style:dashed; color:var(--muted); opacity:.65; }
/* lash mapping: draw on an eye template, with the artist's library + reference maps */
.maphint { color:var(--muted); font-size:16px; margin:6px 0 0; }
.mapcard { position:relative; margin-top:14px; max-width:720px; border:1.5px solid var(--field);
border-radius:18px; overflow:hidden; background:#fff; cursor:pointer; }
.mapcard .mapimg, .mapcard .maptpl { display:block; width:100%; height:auto; }
.mapcard-tools { position:absolute; right:14px; bottom:14px; display:flex; align-items:center; gap:10px; }
.mapcard-tools .btn.ghost { background:rgba(255,255,255,.92); }
.mapcard-edit { border:0; border-radius:999px; cursor:pointer;
background:var(--bar); color:#fff; font:inherit; font-size:17px; padding:9px 18px; box-shadow:0 6px 16px rgba(120,90,80,.25); }
/* map editor modal, opened large so drawing is comfortable */
.modal.mapmodal { width:min(1180px, 96vw); max-width:none; }
.mapedit { margin-top:12px; border:1.5px solid var(--field); border-radius:14px; overflow:hidden; background:#fff; position:relative; }
/* The canvas is taller than the eye guide on purpose: the guide sits centred (object-fit: contain)
with room above and below, so there is somewhere to draw once the view is pinched in close. */
.mapzoom { position:relative; display:block; transform-origin:0 0; }
.mapbg { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.mapcanvas { position:relative; z-index:1; display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; }
.saverow { margin-top:14px; display:flex; gap:12px; align-items:center; }
.mapname { flex:1; min-width:0; box-sizing:border-box; border:1.5px solid var(--field); border-radius:12px; background:#fff;
padding:12px 16px; font:inherit; font-size:18px; color:var(--ink); outline:0; }
.mapname:focus { border-color:var(--bar); }
.mapname.need { border-color:var(--rose); background:#fdf3f1; }
.saverow .btn { flex:none; }
.pens { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
/* Erase and Clear share the colour row, pushed to its right end. */
.pentools { margin-left:auto; display:flex; align-items:center; gap:8px; }
/* Colours are shown as bare swatches now: no labels, since she already knows what each stands for. */
.pen { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
border:1.5px solid var(--field); background:#fff; border-radius:50%; cursor:pointer; }
.pen span { width:22px; height:22px; border-radius:50%; display:inline-block; }
.pen.on { border-color:var(--bar); box-shadow:0 0 0 3px rgba(125,90,69,.25); }
/* The eraser is a tool, not a colour: it lights up when active. */
.btn.ghost.tool.on { background:var(--bar); border-color:var(--bar); color:#fff; }
/* Undo one mark: a small round button beside the colours. */
.undo { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
border:1.5px solid var(--field); background:#fff; border-radius:50%; color:var(--bar); cursor:pointer; }
.undo:active { background:var(--wash); }
/* Three families of button in the map modal, so they read apart at a glance: the drawing tools stay
rose (Erase, Clear), the library actions are brown, Cancel is a quiet grey, and the primary Save
for this client keeps its filled rose. */
.modal.mapmodal .btn.ghost[data-act="library"],
.modal.mapmodal .btn.ghost[data-act="savelib"] { background:#ecd7c5; border-color:#ecd7c5; color:#8a5a3f; }
.modal.mapmodal .btn.ghost[data-act="cancel"] { background:#ece6e2; border-color:#ece6e2; color:#7a6f67; }
/* On a phone the drawing modal keeps its controls small and in scale with the sheet. */
@media (max-width: 640px) {
/* Give the drawing as much room as a portrait screen allows: full width, thin padding, and the
surrounding chrome kept tight so the frame is the biggest thing on screen. */
.modal.mapmodal { width:100vw; max-width:100vw; border-radius:20px 20px 0 0; padding:12px 8px; }
.modal.mapmodal h3 { font-size:20px; }
.modal.mapmodal .muted { font-size:11.5px; margin:3px 0 6px; }
.mapmodal .mapedit { margin-top:8px; }
.mapmodal .pens { gap:10px; margin-top:10px; }
.mapmodal .pen { width:32px; height:32px; }
.mapmodal .pen span { width:19px; height:19px; }
.mapmodal .undo { width:32px; height:32px; }
.mapmodal .pentools { gap:7px; }
.mapmodal .saverow { gap:7px; margin-top:10px; }
.mapmodal .mapname { font-size:12.5px; padding:9px 11px; }
.modal.mapmodal .actions { gap:8px; margin-top:10px; }
.mapmodal .btn { padding:7px 11px; font-size:12.5px; }
}
/* map library modal */
.libmodal { max-width:760px; }
.libgroups { margin-top:12px; max-height:60vh; overflow-y:auto; }
.libsec { margin-bottom:18px; }
.libtitle { font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.libgrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.libcell { position:relative; border:1.5px solid var(--field); border-radius:12px; overflow:hidden;
background:#fdfaf8; cursor:pointer; transition:border-color .12s; }
.libcell:hover { border-color:var(--bar); }
.libcell img { display:block; width:100%; height:auto; }
.libname { padding:6px 10px; font-size:15px; color:var(--ink); }
.libdel { position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:0;
background:rgba(63,52,47,.72); color:#fff; font-size:18px; line-height:1; cursor:pointer; }
/* consent */
.consent-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; }
.locked-note { display:inline-flex; align-items:center; gap:6px; font-size:15px; color:var(--soft);
background:var(--wash); border:1px solid var(--field); border-radius:10px; padding:8px 14px; }
.consent-text { font-size:19px; line-height:1.7; color:var(--ink); margin-top:10px; }
.consent-text p { margin:0 0 14px; }
.consent-text ul { background:#f7ede7; border-radius:12px; padding:16px 22px 16px 42px; margin:16px 0; line-height:1.7; }
.consent-edit { width:100%; box-sizing:border-box; margin-top:12px; min-height:52vh; resize:vertical;
border:1.5px solid var(--field); border-radius:14px; background:#fff; padding:18px 20px;
font:inherit; font-size:18px; line-height:1.7; color:var(--ink); outline:0; }
.consent-edit:focus { border-color:var(--bar); }
/* Laptop: the consent reads like a document, so a touch smaller and justified rather than a big
ragged-right block. */
@media (min-width: 1025px) {
.consent-text { font-size:16px; line-height:1.65; }
.consent-text p { text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
}
.signame { color:#4a3f3a; font-size:16px; margin-top:6px; }
.scope { display:flex; flex-direction:column; gap:12px; margin:6px 0 4px; }
.scope-opt { text-align:left; border:1.5px solid var(--field); border-radius:14px; background:#fff; cursor:pointer;
padding:14px 18px; font:inherit; display:flex; flex-direction:column; gap:3px; transition:border-color .12s; }
.scope-opt:hover { border-color:var(--bar); background:var(--wash); }
.scope-opt b { font-size:19px; color:var(--ink); font-weight:600; }
.scope-opt span { font-size:15px; color:var(--muted); }
/* On a phone the scope-choice modal (Apply these changes to…) reads a size down. */
@media (max-width: 640px) {
.modal.scopemodal h3 { font-size:21px; }
.modal.scopemodal .muted { font-size:13px; margin:4px 0 10px; }
.scope { gap:10px; }
.scope-opt { padding:11px 14px; }
.scope-opt b { font-size:15px; }
.scope-opt span { font-size:12.5px; }
}
.scope-opt.danger-opt:hover { border-color:#c0564a; background:#fdf3f1; }
.scope-opt.danger-opt b { color:#c0564a; }
/* the recommended path stands out: solid green, white text */
.scope-opt.good-opt { background:#4a8a50; border-color:#4a8a50; }
.scope-opt.good-opt:hover { background:#417a47; border-color:#417a47; }
.scope-opt.good-opt b { color:#fff; }
.scope-opt.good-opt span { color:rgba(255,255,255,.9); }
/* the three permissions: separate from the wording, and answered one by one */
.perms { margin:26px 0 4px; background:var(--wash); border:1.5px solid var(--field);
border-radius:16px; padding:6px 20px 14px; }
.perms-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px;
padding-top:12px; }
.perms-head h3 { margin:0; font-size:17px; color:var(--bar); font-weight:600;
letter-spacing:.04em; text-transform:uppercase; }
.perms-open { font-size:15px; color:var(--rose-2); }
.prow { display:flex; align-items:center; justify-content:space-between; gap:24px;
padding:14px 0; border-top:1px solid var(--field); margin-top:12px; }
.prow:first-of-type { border-top:0; }
.pinfo { flex:1; min-width:0; }
.plabel { font-size:19px; color:var(--ink); line-height:1.35; }
.pwhy { font-size:15px; color:var(--muted); margin-top:3px; line-height:1.4; }
.prow .opts { display:flex; gap:26px; flex-shrink:0; }
.prow .opt { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:19px; color:var(--ink); }
/* a minor's file says what the document is missing, and blocks nothing */
.minor-note { margin:18px 0 4px; background:#fdf3f1; border:1.5px solid #e8bdb4; border-radius:14px;
padding:14px 18px; font-size:17px; line-height:1.5; color:#8d3b2f; }
.minor-note.soft { background:var(--wash); border-color:var(--field); color:var(--muted); }
/* The link is part of the sentence, not a floated button hanging off the corner: it reads inline
after "sign too", wrapping to the next line naturally instead of detaching to the right edge. */
.minor-note .lnk { font-size:17px; float:none; display:inline; margin-left:4px; }
.guardian-in { display:block; width:100%; box-sizing:border-box; margin-top:6px; border:0; outline:0;
background:transparent; font:inherit; font-size:16px; color:#4a3f3a; padding:0; }
.siglines { display:flex; gap:40px; margin-top:36px; }
.sigline { flex:1; border-top:1.5px solid var(--ink); padding-top:8px; font-size:15px; color:var(--muted);
min-height:96px; }
.sigline.tap { cursor:pointer; }
.sigline.date { flex:.5; }
/* Signature sits on its own line under the label, never on top of it. */
.sigline img { display:block; margin-top:10px; height:52px; max-width:100%; object-fit:contain; }
.sigline .hint { display:block; margin-top:14px; font-size:14px; color:var(--rose-2); }
/* treatment record */
/* narrowing the visits: a search over the written fields, and a status filter on the Payment header */
.trecbar { display:flex; align-items:center; gap:14px; margin-top:14px; }
/* min-width:0 so the search field can shrink and leave room for the + beside it: without it, Safari
keeps the input at its content width and pushes the + off the right edge of the screen. */
.tsearch { flex:1; min-width:0; display:flex; align-items:center; gap:10px; background:var(--card); border:1.5px solid var(--field);
border-radius:40px; padding:10px 18px; max-width:480px; }
.tsearch input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit; font-size:17px; color:var(--ink); }
/* The visit + sits on the search row on every format now, beside the search, so it is where the eye
already is instead of floating in the header. The old header + is retired (hidden below). */
.trec-add { display:flex; flex:none; width:46px; height:46px; font-size:24px; }
#rec-action { display:none; }
.tclear { border:0; background:none; font:inherit; font-size:20px; color:var(--muted); cursor:pointer; padding:0 2px; }
.thidden { color:var(--muted); font-size:16px; }
.thidden .lnk { margin-left:6px; float:none; }
.payhead { position:relative; white-space:nowrap; }
.colfilt { border:0; background:none; font:inherit; font-size:inherit; color:#fff; cursor:pointer; padding:0; white-space:nowrap; }
.colfilt.on { font-weight:600; text-decoration:underline; }
.colmenu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; background:var(--card); border:1px solid var(--field);
border-radius:14px; box-shadow:var(--shadow); padding:6px; min-width:180px; }
.colmenu button { display:block; width:100%; text-align:left; border:0; background:none; font:inherit; font-size:17px;
color:var(--ink); padding:11px 14px; border-radius:10px; cursor:pointer; }
.colmenu button:hover { background:var(--wash); }
.colmenu button.on { background:var(--wash-2); font-weight:600; color:var(--bar); }
.trec { margin-top:12px; border:1px solid var(--field); border-radius:14px; overflow:hidden; }
.trec .head, .trec .line { display:grid; grid-template-columns:1.1fr 1.1fr 1.05fr .52fr .62fr .62fr .68fr .82fr 44px; }
/* Income and Expenses reuse the .trec shell but carry their own columns, not the record's nine, so
they fill the width with no empty track left on the right. */
.trec.pay-table .head, .trec.pay-table .line { grid-template-columns:.8fr 1fr 1.05fr .95fr .85fr .7fr .9fr; }
.trec.exp-table .head, .trec.exp-table .line { grid-template-columns:1fr 1.4fr 1fr .7fr 1.05fr 44px; }
.trec.exp-table.novat .head, .trec.exp-table.novat .line { grid-template-columns:1.1fr 1.7fr 1.1fr 44px; }
.trec .head { background:var(--tablehead); color:#fff; font-size:17px; }
.trec .head > div { padding:12px 11px; }
.trec .line { border-top:1px solid var(--line); }
.trec .line[data-row] { cursor:pointer; transition:background .12s; }
.trec .line[data-row]:hover { background:var(--wash); }
.trec .cell { display:flex; align-items:center; font-size:17px; padding:15px 11px; color:var(--ink); min-height:54px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trec .cell + .cell { border-left:1px solid var(--wash-2); }
/* a long service or style name shortens with an ellipsis instead of being cut mid-letter */
.trec .cell .v { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.trec .cell.price { font-weight:600; color:var(--serif); }
.trec .datecell { flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; }
.locpill { display:inline-block; background:#e2eff8; color:#3f7fa1; font-size:12px; font-weight:600;
border-radius:999px; padding:3px 11px; white-space:nowrap; }
.trec .dash { color:var(--faint); }
.trec .paycell { display:flex; align-items:center; justify-content:center; padding:8px; border-left:1px solid var(--wash-2); }
.paypill { border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:600; border-radius:999px;
padding:6px 14px; white-space:nowrap; transition:background .12s; }
.paypill.paid { cursor:default; } /* paid can only be undone in the editor */
.paypill.paid { background:#e3f0e2; color:#3f7a43; }
.paypill.unpaid { background:#f4e5e2; color:#b25c4c; }
.paypill.partial { background:#f6ecd8; color:#a9822f; }
.paypill.noshow { cursor:default; background:#efe1cd; color:#8a6a3a; } /* a label, not a payment state */
.paypill.deposit { background:#e7e0f2; color:#6a4fa0; } /* deposit held, tap to complete the visit */
.paypill.refunded { cursor:default; background:#e4e7ea; color:#5f6b74; } /* deposit given back, counts as nothing */
.trec .del { display:flex; align-items:center; justify-content:center; cursor:pointer; color:#c07a6a;
font-size:24px; border-left:1px solid var(--wash-2); }
/* treatment form popup */
.modal.trecmodal { width:min(720px, 94vw); }
.tform { display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:8px; }
.tform .tf { margin-top:0; }
.tform .tf.full { grid-column:1 / -1; }
/* A group that is shown or hidden as one block, but whose fields still belong to the form's grid.
Left as a plain div it took a single cell, so its fields stacked in the left column and left a
hole down the right one. `display:contents` makes the wrapper exist for JS and not for layout;
`.hidden` still wins over it, so toggling the group keeps working. */
.tform .fieldgroup { display:contents; }
/* ---- payment, inside a treatment ----
Its own bordered block rather than loose fields in the form's two columns, where the first
installment's method landed beside the second installment's amount and read as belonging to it.
An amount and the way it was paid now sit on one row and cannot be misread as anything else. */
.payblock { border:1px solid var(--field); border-radius:16px; padding:16px 18px 14px; background:var(--wash); }
.payblock > label { margin-bottom:10px; }
.payrow { display:flex; gap:20px; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap; }
.paycol { display:flex; flex-direction:column; gap:6px; }
.paycol.grow { flex:1; min-width:230px; }
.paycol .amount { width:150px; background:var(--card); }
.paycol .chips { margin-top:0; }
.paylab { font-size:14px; color:var(--muted); }
.payfoot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
padding-top:4px; border-top:1px solid var(--field); margin-top:2px; }
.payfoot .paytotal { margin:0; }
.paystatus { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
padding-top:12px; border-top:1px solid var(--field); }
.paystatus .chips { margin-top:0; }
.paystatus .sset-hint { margin:0; font-size:13px; flex-basis:100%; }
/* Partial is a result, so it is shown and not offered. */
.chip.readonly { cursor:default; }
.chip.readonly:not(.on) { opacity:.5; }
.payblock .fieldnote { color:#b3543f; margin:8px 0 0; }
select.svc { cursor:pointer; appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.tform .chips { margin-top:2px; }
.amount { display:flex; align-items:center; border:1.5px solid var(--field); border-radius:12px; background:#fff; padding-left:16px; transition:border-color .12s; }
.amount:focus-within { border-color:var(--bar); }
.amount .cur { color:var(--muted); font-size:20px; }
.amount .tf-in { border:0; padding-left:8px; }
.paytotal { font-size:17px; color:var(--serif); font-weight:600; padding-top:2px; }
/* archived treatments */
.arch-toggle { margin-top:14px; border:0; background:none; cursor:pointer; font:inherit; font-size:16px;
color:var(--terra); font-weight:600; padding:6px 0; }
.archived-list { margin-top:8px; display:flex; flex-direction:column; gap:8px; }
.arch-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px;
border:1px solid var(--field); border-radius:12px; background:var(--wash); color:var(--soft); }
.arch-row .arch-info { font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arch-row .arch-info b { color:var(--serif); }
.arch-row .paypill { margin-left:8px; font-size:13px; padding:4px 10px; }
.arch-acts { display:flex; align-items:center; gap:8px; flex:none; }
.arch-acts .btn.ghost { padding:7px 14px; font-size:14px; }
.arch-acts .del { border:0; background:none; cursor:pointer; color:#c0564a; font-size:22px; padding:0 6px; line-height:1; }
/* pictures & notes */
/* what a permission removed from this screen, and where to change it */
.perm-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
margin-top:18px; background:#fdf3f1; border:1.5px solid #e8bdb4; border-radius:14px;
padding:13px 18px; font-size:17px; line-height:1.45; color:#8d3b2f; }
.perm-bar .lnk { font-size:17px; color:#8d3b2f; text-decoration:underline; flex:none; }
.gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:22px; }
.gcell { position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:#efe3dd;
box-shadow:0 6px 16px rgba(120,90,80,.12); cursor:pointer; }
.gcell img { width:100%; height:100%; object-fit:cover; }
.gcell .cap { position:absolute; left:0; right:0; bottom:0; padding:14px 10px 8px; color:#fff; font-size:13px;
font-weight:600; background:linear-gradient(to top, rgba(40,25,20,.72), transparent); }
/* Share the picture out, or delete it. On a tablet there is no hover, so the tools are always there. */
.gtools { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2; }
.gt { width:32px; height:32px; border-radius:50%; border:0; cursor:pointer; padding:0;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.94); color:var(--serif); font:400 17px/32px var(--sans);
box-shadow:0 3px 8px rgba(80,55,45,.24); }
.gt svg { display:block; }
.gt.del { color:var(--rose); font-size:20px; }
.gt:active { background:var(--deep); color:#fff; }
.gadd { display:flex; align-items:center; justify-content:center; border:2px dashed var(--field);
color:var(--muted); font-size:15px; background:var(--wash); }
.notes-wrap { display:flex; margin-top:18px; border:1px solid var(--field); border-radius:16px; overflow:hidden; min-height:420px; }
.notes-list { width:250px; flex:none; background:var(--wash); border-right:1px solid var(--field); display:flex; flex-direction:column; }
.notes-list .lh { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 12px; border-bottom:1px solid var(--field); }
.notes-list .lh span { font-weight:600; font-size:16px; color:var(--serif); }
/* The notes list header carries a compact search and its + on one line. */
.notes-list .lh .tsearch { flex:1; min-width:0; padding:8px 12px; border-radius:12px; }
.notes-list .lh .tsearch input { font-size:15px; }
.notes-list .lh .round-btn.nadd { flex:none; width:38px; height:38px; font-size:22px;
box-shadow:0 6px 14px rgba(160,110,110,.3); }
.notes-none { padding:22px 16px; color:#9a8a82; font-size:14px; }
.notes-list .item { padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.notes-list .item.on { background:#f0e2da; }
.notes-list .item .t { font-weight:600; font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notes-list .item .d { font-size:13px; color:var(--soft); margin-top:3px; }
.note-editor { flex:1; padding:20px 24px; display:flex; flex-direction:column; }
.note-editor .d { font-size:14px; color:var(--soft); }
.note-editor input.title { border:0; outline:0; background:transparent; font-family:var(--serif-font);
font-size:28px; color:var(--serif); margin:4px 0 12px; }
.note-editor textarea { flex:1; border:0; outline:0; background:transparent; resize:none; font:inherit;
font-size:19px; line-height:1.7; color:var(--ink); min-height:240px; }
/* The full-screen note editor a phone card opens into. Title, body, delete, saving as it is typed. */
.modal.notemodal { display:flex; flex-direction:column; width:min(720px, 94vw); height:min(80vh, 760px); overflow:hidden; }
.notemodal-h { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nm-date { font-size:14px; color:var(--soft); }
.nm-title { border:0; outline:0; background:transparent; font-family:var(--serif-font); font-size:24px;
color:var(--serif); padding:10px 0 6px; }
.nm-body { flex:1; min-height:0; border:0; outline:0; background:transparent; resize:none; font:inherit;
font-size:16px; line-height:1.6; color:var(--ink); }
.notemodal-f { flex:none; display:flex; justify-content:flex-start; padding-top:12px; margin-top:6px; border-top:1px solid var(--line); }
.notemodal .nm-del { border-color:#e6c4bd; color:#c07a6a; }
/* Notes on a phone: a single column of cards on a beige band, grouped by day, like the mockup. The
two-pane list-and-editor is desktop only. */
@media (max-width: 640px) {
/* The tab's + moves off the file header (where it looked like it acted on the whole file) onto the
tab itself: the search row for Record, the top of the beige card for Notes. */
#rec-action { display:none; }
.trec-add { display:flex; width:46px; height:46px; font-size:24px; flex:none; }
.notes-empty { color:var(--muted); font-size:16px; padding:20px 4px 30px; }
.rbody:has(.notetray) { padding-bottom:0; }
.notetray { background:#efe4db; box-sizing:border-box;
margin:16px calc(-26px - env(safe-area-inset-right)) 0 calc(-26px - env(safe-area-inset-left));
padding:4px calc(26px + env(safe-area-inset-right)) calc(var(--navh) + env(safe-area-inset-bottom) + 24px) calc(26px + env(safe-area-inset-left));
border-radius:26px 26px 0 0;
/* Reach the bottom of the screen even with one note: the beige runs under the nav like
Home and Finances, instead of stopping short on white. */
min-height:calc(100dvh - 120px); }
.notetray-top { display:flex; align-items:center; gap:10px; padding-top:12px; }
.notetray-top .notesearch { flex:1; min-width:0; }
.notetray-top .round-btn { flex:none; width:46px; height:46px; font-size:24px; }
.notegroup { margin-top:16px; }
.notegroup-h { font-size:15px; font-weight:600; color:var(--soft); margin:0 2px 10px; }
.notecard { display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
box-shadow:0 4px 14px rgba(120,90,80,.10); padding:14px; margin-bottom:10px; cursor:pointer; }
.notecard:active { background:#fbf7f4; }
.notecard-txt { flex:1; min-width:0; }
.notecard .nt { font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notecard .nb { font-size:13.5px; color:var(--soft); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.noteopen { flex:none; width:38px; height:38px; border-radius:50%; background:var(--bar); color:#fff;
display:inline-flex; align-items:center; justify-content:center; pointer-events:none; }
.noteopen svg { width:17px; height:17px; }
/* A framed, centred editor, not a full screen: shorter, with room to breathe around it. */
.modal.notemodal { width:92vw; height:min(66vh, 540px); max-width:none; border-radius:22px; }
}
/* buttons */
.btn { border:0; cursor:pointer; font:inherit; border-radius:12px; padding:10px 18px; font-size:16px; }
.btn.ghost { background:none; border:1.5px solid var(--rose-2); color:var(--rose); font-weight:600;
display:inline-flex; align-items:center; gap:8px; }
.btn.solid { background:linear-gradient(135deg, var(--rose-2), var(--rose)); color:#fff; font-weight:600;
display:inline-flex; align-items:center; gap:8px; }
.btn.danger { background:#c0564a; color:#fff; font-weight:600; display:inline-flex; align-items:center; gap:8px; }
/* signature modal */
/* A dialog taller than the screen used to overflow equally above and below, with nothing to
scroll: the title and the buttons were simply unreachable. Two things fix it. The backdrop
scrolls and aligns to the top (centring a taller-than-viewport flex child clips its top and makes
it impossible to scroll back to), and `margin:auto` keeps it centred while it still fits. */
.modal-bg { position:fixed; inset:0; background:rgba(60,40,35,.34); z-index:60; display:flex;
align-items:flex-start; justify-content:center; overflow-y:auto; padding:20px; }
.modal { width:min(560px, 92vw); background:#fff; border-radius:24px; padding:28px 30px;
box-shadow:0 24px 60px rgba(90,60,50,.3); margin:auto; max-height:calc(100dvh - 40px);
overflow-y:auto; }
/* The long forms do better with their own scroller: the heading and the buttons stay in place, so
Save is always one tap away instead of being at the end of a long scroll. */
.modal.trecmodal, .modal.mapmodal { display:flex; flex-direction:column; overflow:hidden; }
.modal.trecmodal .tform { flex:1; min-height:0; overflow-y:auto; padding-right:6px; }
.modal.trecmodal h3, .modal.trecmodal .actions, .modal.mapmodal h3, .modal.mapmodal .actions { flex:none; }
.modal h3 { font-size:30px; }
.modal .muted { color:var(--soft); font-size:16px; margin:6px 0 16px; }
/* The visit editor is built at tablet sizes; on a phone it reads at the same scale as the rest of
the file (Intake, Lash), so more than three fields fit at once and nothing shouts. Scoped to the
modal, so tablet and desktop keep their sizes. */
@media (max-width: 640px) {
.modal.trecmodal { padding:22px 20px; }
.modal.trecmodal h3 { font-size:22px; }
.modal.trecmodal .tform { gap:12px; margin-top:4px; }
.modal.trecmodal .tf label { font-size:13px; margin-bottom:4px; }
.modal.trecmodal .req { font-size:10.5px; }
.modal.trecmodal .tf-in,
.modal.trecmodal .tform input,
.modal.trecmodal .tform select { font-size:16px; padding:11px 14px; }
.modal.trecmodal .chip { font-size:14px; padding:6px 13px; }
.modal.trecmodal .chip .x { width:18px; height:18px; line-height:16px; margin-left:6px; }
.modal.trecmodal .chip-in { font-size:15px; }
.modal.trecmodal .lnk { font-size:13px; }
.modal.trecmodal .payblock { padding:12px 14px 10px; }
.modal.trecmodal .paylab, .modal.trecmodal .paystatus .sset-hint { font-size:12px; }
.modal.trecmodal .actions .btn { font-size:15px; padding:9px 16px; }
}
/* The period picker (Pick a period) is built at tablet sizes too; on a phone it reads at the same
calm scale as the visit editor, so its title and fields stop shouting. Scoped, like trecmodal. */
@media (max-width: 640px) {
.modal.ppmodal { padding:22px 20px; }
.modal.ppmodal h3 { font-size:22px; }
.modal.ppmodal .tform { gap:12px; margin-top:4px; }
.modal.ppmodal .tf label { font-size:13px; margin-bottom:4px; }
.modal.ppmodal .tf-in,
.modal.ppmodal .tform input,
.modal.ppmodal .tform select { font-size:16px; padding:11px 14px; }
.modal.ppmodal .tf-note { font-size:12px; }
.modal.ppmodal .paytotal { font-size:14px; }
.modal.ppmodal .actions .btn { font-size:15px; padding:9px 16px; }
}
/* photo opened large, with save / share. Darker backdrop so the photo carries the screen. */
.modal-bg.lightbox { background:rgba(28,20,18,.86); }
.lightbox .lb { display:flex; flex-direction:column; gap:14px; align-items:center; max-width:94vw; }
.lightbox .lb img { max-width:94vw; max-height:74vh; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.45); display:block; }
.lb-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; flex-wrap:wrap; }
.lb-cap { color:#fff; font-size:16px; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.lb-note { opacity:.85; font-size:14px; }
.lb-acts { display:flex; gap:10px; margin-left:auto; }
.lightbox .btn.ghost { background:rgba(255,255,255,.94); }
.modal.sigmodal { width:min(720px, 94vw); }
.pad { width:100%; height:260px; border:1.5px solid var(--field); border-radius:14px; background:#fdfaf8; touch-action:none; display:block; cursor:crosshair; }
.modal .actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
/* On a phone a modal can carry four buttons (Delete, Cancel appointment, Close, Save). Without a wrap
they overflow a 390px screen and the left ones are clipped off the edge. Let them fall to a second
row, still right-aligned, so every button stays reachable. */
@media (max-width: 640px) {
.modal .actions { flex-wrap:wrap; gap:10px; }
}
/* Portrait tablets narrower than a 12.9" iPad (which is 1024 wide, matching the mockup):
let the two-column grids stack so nothing is clipped by the tab rail. */
@media (max-width: 960px) {
.grid2 { grid-template-columns:1fr; gap:14px 0; }
.cfgrid { grid-template-columns:1fr; gap:12px; }
.medq { max-width:none; }
.rbody { padding:20px 22px; }
h2.section { font-size:30px; }
h3.sub { font-size:26px; }
}
@media (max-width: 720px) {
.libgrid { grid-template-columns:repeat(2, 1fr); }
.medq .row { flex-wrap:wrap; gap:4px 0; }
.trec .head, .trec .line { grid-template-columns:1.05fr 1.05fr 1fr .5fr .6fr .6fr .64fr .78fr 38px; }
.trec .cell { font-size:16px; padding:12px 8px; }
.paypill { font-size:13px; padding:6px 10px; }
.tform { grid-template-columns:1fr; }
.siglines { flex-direction:column; gap:20px; }
}
/* The treatment table on a phone: the five columns that matter (Date, Service, Style, Price, Payment)
fit the screen instead of scrolling sideways. Volume, Length and Curl live in the visit editor, a
tap away. This sits after the ≤720 rule on purpose, so its grid wins over that rule's nine columns
at this width. Phone only; tablet and desktop keep every column. */
@media (max-width: 640px) {
/* Reclaim a little of the body's reading gutter so five columns have room to read fully, the way
the mockup does: the search bar and the table both bleed a touch wider and stay aligned. */
.trecbar { margin-left:-13px; margin-right:-13px; }
.trec { overflow-x:visible; margin-left:-13px; margin-right:-13px; }
.trec .head, .trec .line { min-width:0; grid-template-columns:72px minmax(0,1fr) 56px 46px 56px 20px; }
/* Volume, Length, Curl are the 4th, 5th and 6th cell of every row and header. */
.trec .head > *:nth-child(4), .trec .head > *:nth-child(5), .trec .head > *:nth-child(6),
.trec .line > *:nth-child(4), .trec .line > *:nth-child(5), .trec .line > *:nth-child(6) { display:none; }
/* Income on the phone: Date, Client, Amount, Status. Service, Method and Left step aside; the amount
(the point of the table) is brought back, and the four columns fill the width with no gap. */
.trec.pay-table .head, .trec.pay-table .line { grid-template-columns:56px minmax(0,1fr) 78px 62px; }
.trec.pay-table .head > *:nth-child(3), .trec.pay-table .line > *:nth-child(3) { display:none; }
.trec.pay-table .head > *:nth-child(4) { display:block; }
.trec.pay-table .line > *:nth-child(4) { display:flex; }
/* Expenses on the phone: Date, Category, Amount. VAT, reclaimable and the × are on the wider screen.
The .novat variant is spelled out too, or its more specific desktop grid would win here. */
.trec.exp-table .head, .trec.exp-table .line,
.trec.exp-table.novat .head, .trec.exp-table.novat .line { grid-template-columns:58px minmax(0,1fr) 92px; }
.trec .head { font-size:12px; }
.trec .head > div { padding:11px 5px; }
/* Nothing spills into its neighbour: each cell clips, and the service pill ellipsises rather than
overflowing the column when a name is long. */
.trec .cell { font-size:13px; padding:12px 5px; min-height:50px; overflow:hidden; }
.trec .datecell { font-size:11px; gap:3px; white-space:nowrap; }
/* Style repeats the style word (Volume, Hybrid): a size down so it reads in full in a narrow column. */
.trec .head > *:nth-child(3), .trec .line > *:nth-child(3) { font-size:11.5px; }
.trec .cell.price { font-size:13.5px; }
.trec .pill { font-size:11px; padding:4px 8px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trec .locpill { font-size:8.5px; padding:2px 5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trec .paycell { padding:6px 2px; }
.trec .paypill { font-size:11.5px; padding:5px 8px; }
.trec .del { font-size:16px; }
.colfilt { font-size:12px; }
}
/* The client file on a phone: the tab rail becomes a horizontal row of pills at the top of the body
(moved there in the DOM by placeRail), the form pairs into two columns the way the mockup asks, and
the decorative left rule is dropped. This block sits after the ≤960 rules on purpose, so its
two-column grid wins over their single-column stack. Phone only; tablet and desktop are untouched. */
@media (max-width: 640px) {
/* No white card around the file on a phone: with the tabs swiped rather than pinned to a rail, the
card was just a frame. The record breaks out of the content's 26px side padding to span the whole
screen, so the beige band and the tab strip can bleed to the very edges like Home and Finances. */
.record { background:transparent; border-radius:0; box-shadow:none;
left:calc(-26px - env(safe-area-inset-left)); right:calc(-26px - env(safe-area-inset-right)); }
/* The form keeps a 26px reading gutter (same as Home/Finances content), added back on the body. */
.rbody { padding-top:18px;
padding-left:calc(26px + env(safe-area-inset-left)); padding-right:calc(26px + env(safe-area-inset-right)); }
/* The tab strip bleeds full-width and scrolls edge to edge; the first pill still lines up on the gutter. */
.rail { width:auto; flex-direction:row; gap:5px; padding-bottom:0;
margin:2px calc(-26px - env(safe-area-inset-right)) 18px calc(-26px - env(safe-area-inset-left));
padding-left:calc(26px + env(safe-area-inset-left)); padding-right:calc(26px + env(safe-area-inset-right));
overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail .tab { flex:0 0 auto; margin-left:0; opacity:.92; border-radius:999px; padding:7px 12px; }
.rail .tab.active { margin-left:0; border-radius:999px; opacity:1; box-shadow:0 6px 14px rgba(90,60,40,.22); }
.rail .tab span { writing-mode:horizontal-tb; transform:none; font-size:11px; letter-spacing:.05em; }
.accent { border-left:0; padding-left:0; margin-top:10px; }
.accent .grid2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px 16px; }
.grid2 .f { min-width:0; }
.f input { font-size:16px; min-width:0; }
.f label { font-size:13px; }
.f-name { order:1; } .f-phone { order:2; }
.f-dob { order:3; } .f-email { order:4; }
.f-address { grid-column:1 / -1; order:5; }
.f-referral { order:6; } .f-started { order:7; }
.f-emergencyName { order:8; } .f-emergencyPhone { order:9; }
/* Lash Info: the dropdown boxes go two-up, with a compact label and value so both fit in a narrow
box. Product is a free-text field dressed as the same inline box, half-width on the left. */
.cfgrid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:11px; }
.cfgrid .cf { min-width:0; }
.dd { gap:6px; padding:10px 11px; }
.dd-label { min-width:0; font-size:11.5px; }
.dd-val, .dd-input { font-size:14.5px; min-width:0; }
.dd-caret { font-size:15px; flex:none; }
/* The options panel: smaller chips, in scale with the compact page. */
.dd-panel { padding:11px; }
.dd-panel .chips { gap:6px; }
.dd-panel .chip { font-size:12px; padding:5px 11px; }
.dd-panel .chip .x { width:17px; height:17px; line-height:15px; margin-left:6px; }
.dd-panel .chip-in { font-size:13px; }
.accent .tf { display:flex; align-items:center; gap:6px; margin-top:11px; max-width:calc(50% - 6px);
border:1.5px solid var(--field); border-radius:12px; background:#fff; padding:10px 11px; }
.accent .tf label { margin:0; flex:none; white-space:nowrap; font-size:11.5px; }
.accent .tf-in { flex:1 1 auto; min-width:0; border:0; border-radius:0; background:transparent; padding:0; font-size:14.5px; }
.maptray .maptray-h { margin-top:22px; }
.maptray .maphint { margin-top:8px; font-size:14.5px; }
.maptray .mapcard { background:#fff; margin-top:14px; }
/* The Library / Draw buttons sit below the drawing, not over it, so they never hide the map. */
.maptray .mapcard-tools { position:static; right:auto; bottom:auto; justify-content:flex-end;
gap:10px; padding:12px; }
/* Consent on a phone: Edit and Download shrink to icon buttons in the top-right corner, the text
reads a size smaller, and the paragraphs are justified with a first-line indent, like a book. */
.consent-bar { justify-content:flex-end; gap:8px; margin-top:0; }
.consent-bar .locked-note { margin-right:auto; } /* signed: note keeps the left, icon stays right */
.cbtn { padding:0; width:40px; height:40px; flex:none; display:inline-flex; align-items:center;
justify-content:center; border-radius:12px; }
.cbtn .btxt { display:none; }
.cbtn svg { width:20px; height:20px; }
.consent-text { font-size:15px; line-height:1.65; margin-top:8px; }
.consent-text p { text-align:justify; hyphens:auto; -webkit-hyphens:auto; text-indent:1.3em; margin:0 0 9px; }
.consent-text p:first-child { text-indent:0; }
/* The permissions block reads a size down too. */
.perms { padding:4px 14px 12px; margin:18px 0 4px; }
.perms-head h3 { font-size:13.5px; }
.perms-open { font-size:12.5px; }
.prow { padding:10px 0; gap:14px; margin-top:10px; }
.plabel { font-size:14.5px; line-height:1.3; }
.pwhy { font-size:12px; margin-top:2px; }
.prow .opts { gap:14px; }
.prow .opt { font-size:13.5px; gap:6px; }
.prow .opt .box { width:20px; height:20px; }
/* Editing mode: the "Editing…" note takes its own line so it reads, and the buttons shrink and wrap
instead of crowding off the left edge. The textarea drops a size too. */
.consent-bar { flex-wrap:wrap; }
.consent-bar .muted { flex:1 1 100%; margin-bottom:8px; font-size:13px; }
.consent-bar > div { flex-wrap:wrap; }
.consent-bar .btn:not(.cbtn) { font-size:12.5px; padding:8px 12px; }
.consent-edit { font-size:15px; line-height:1.6; padding:14px 16px; margin-top:10px; }
/* Medical Info rides a full-width beige band to the bottom, like Home and Finances. The band cancels
the body's 18px side padding to reach the edges, and the body's bottom padding is zeroed so the
beige runs under the nav instead of stopping short on white. */
.rbody:has(.medtray), .rbody:has(.maptray) { padding-bottom:0; }
.medtray, .maptray { background:#efe4db;
margin:22px calc(-26px - env(safe-area-inset-right)) 0 calc(-26px - env(safe-area-inset-left));
padding:2px calc(26px + env(safe-area-inset-right)) calc(var(--navh) + env(safe-area-inset-bottom) + 24px) calc(26px + env(safe-area-inset-left));
border-radius:26px 26px 0 0; }
.medtray .medtray-h { margin-top:22px; }
.medtray .accent { margin-top:12px; }
/* The allergies label sits on the beige, the answer in a white box under it. */
.medtray .allergy { background:transparent; border:0; padding:0; margin-bottom:22px; max-width:none; }
.medtray .allergy label { font-size:16px; margin-bottom:8px; }
.medtray .allergy textarea { background:#fff; border:1px solid rgba(120,90,80,.16); border-radius:14px;
padding:12px 14px; font-size:16px; }
/* Yes/No become filled pills: the square is hidden and the option itself carries the state. */
.medtray .medq .row { flex-wrap:nowrap; gap:12px; align-items:center; font-size:15px;
padding:12px 0; border-bottom:1px solid rgba(120,90,80,.12); }
.medtray .medq .row:last-child { border-bottom:0; }
.medtray .medq .row > div:first-child { min-width:0; }
.medtray .opts { gap:8px; flex:none; }
.medtray .opt { gap:0; padding:6px 15px; border-radius:999px; background:#fff;
border:1px solid rgba(120,90,80,.22); color:var(--muted); font-size:13px; font-weight:600; }
.medtray .opt .box { display:none; }
.medtray .opt.on { background:var(--bar); border-color:var(--bar); color:#fff; }
/* The medications follow-up box matches the allergies box: white on the beige. */
.medtray .medbox { background:#fff; border:1px solid rgba(120,90,80,.16); border-radius:14px; max-width:none; }
/* Pictures on a phone: two photos to a row (three left each one too small to read a lash line),
and the "sharing is off" notice reads a size down so it sits as a quiet note, not a banner. */
.gallery { grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:18px; }
.perm-bar { margin-top:14px; padding:11px 15px; gap:10px; font-size:14px; line-height:1.4; }
.perm-bar .lnk { font-size:14px; }
}
/* placeholder screens */
.placeholder { background:var(--card); border-radius:26px; box-shadow:var(--shadow); padding:60px 40px;
text-align:center; margin-top:10px; }
.placeholder h2 { font-size:38px; }
.placeholder p { color:var(--muted); font-size:18px; margin-top:10px; line-height:1.6; }
/* ---- settings ----
One card per subject, each editing data the client file already reads. Rows are inputs that save
as they are typed: there is no Save button because there is nothing to commit, only her own
settings being kept. */
.sset { background:var(--card); border-radius:20px; box-shadow:var(--shadow); padding:22px 26px 24px; margin-bottom:18px; }
.sset-h { font-size:22px; }
.sset-hint { color:var(--muted); font-size:16px; margin:6px 0 16px; max-width:760px; }
.sset-empty { color:var(--muted); font-size:17px; margin:4px 0 0; }
.sgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 26px; }
.tf-note { margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--muted); }
.tf-note b { color:var(--ink); font-weight:600; }
.tf-read { border:1.5px solid var(--line); border-radius:12px; background:var(--wash); padding:13px 18px;
font-size:19px; color:var(--muted); }
.srow { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.srow .tf-in { flex:1; }
/* A studio is a small stack: its name (with the remove button) on top, then its address and map link
underneath, lighter, so the block reads as one place. */
.ststack { margin-bottom:16px; }
.ststack .srow { margin-bottom:8px; }
.ststack .st-sub { display:block; width:100%; margin-top:8px; font-size:15px; padding:10px 14px; background:#faf7f4; }
/* A service and its booking-page category: the row on top, the category select on a quiet line below,
indented under the name so the block reads as one service. */
.svcstack { margin-bottom:16px; }
.svcstack .srow.svc { margin-bottom:6px; }
.svc-cat { display:flex; align-items:center; gap:10px; padding-left:56px; }
.svc-cat label { flex:none; font-size:13px; color:var(--muted); }
.svc-cat select { flex:1; max-width:280px; font-size:15px; padding:9px 12px; background:#faf7f4; }
@media (max-width: 640px) { .svc-cat { padding-left:0; } .svc-cat select { max-width:none; } }
.catrow .movebtn { flex:none; }
/* The read-only category tag shown beside a service in My booking page (edited in Settings). */
.bsvc-cat { display:inline-block; margin-left:8px; font-size:12px; color:var(--muted);
background:var(--wash-2); padding:2px 9px; border-radius:999px; }
.srow.svc { display:grid; grid-template-columns:44px 1fr 155px 175px 44px; }
/* The colour a service wears on the calendar, right where its name and price are edited. */
/* Both halves of the colour are shown, tint and ink, laid out like an appointment on the calendar:
what she picks here is exactly what she will see there. Showing only the tint made every swatch
look like an empty grey box. */
.swatch { width:36px; height:36px; border-radius:11px; border:0; border-left:5px solid var(--ink, #57667F);
cursor:pointer; box-shadow:0 0 0 1.5px var(--field), 0 3px 7px rgba(120,90,80,.16); }
.palette { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin:18px 0 4px; }
.pswatch { height:52px; border-radius:14px; border:0; border-left:6px solid var(--ink, #57667F);
cursor:pointer; position:relative; box-shadow:0 0 0 1.5px var(--field); }
.pswatch.on { box-shadow:0 0 0 3px var(--bar); }
.pswatch .dup { position:absolute; right:7px; top:2px; color:var(--ink, #57667F); font-size:22px; line-height:1; }
/* the row is dense: a slightly smaller type, and the unit kept off the edge of its box */
.srow .tf-in { font-size:18px; padding:12px 16px; }
.srow .amount { padding-right:14px; }
.srow .amount .tf-in { padding-right:6px; }
.srow.exp { display:grid; grid-template-columns:1fr 265px 44px; }
.srow .del { width:40px; height:40px; flex:none; border:0; font:inherit; border-radius:10px; background:#faf1ee; color:#c07a6a;
display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; }
.srow .del:hover { background:#f6e4df; }
.srow .amount .cur.suff { order:2; margin:0 0 0 6px; white-space:nowrap; font-size:15px; color:var(--muted); }
.addrow { margin-top:6px; }
/* On a phone the settings drop to one column. A service still holds its whole line: colour, name,
price, duration and remove, all shrunk to fit rather than wrapping onto a second row. An expense
keeps its name and remove on the first line, the reclaim rate below. */
@media (max-width: 640px) {
.sgrid { grid-template-columns:1fr; }
/* A description-and-picker row stacks: the label on top, the menu full width below, so a long
option like a time zone is no longer cut off the right edge. */
.setline { flex-wrap:wrap; }
.setline > div { flex:1 1 100%; }
.setline .setpick, .setline .setpick.wide { width:100%; max-width:none; }
.srow.svc { display:grid; align-items:center; gap:6px;
grid-template-columns:22px minmax(0,1fr) 58px 68px 34px;
grid-template-areas:"swatch name price dur del"; }
.srow.svc > :nth-child(1) { grid-area:swatch; }
.srow.svc > :nth-child(2) { grid-area:name; min-width:0; }
.srow.svc > :nth-child(3) { grid-area:price; min-width:0; }
.srow.svc > :nth-child(4) { grid-area:dur; min-width:0; }
.srow.svc > :nth-child(5) { grid-area:del; }
.srow.svc .swatch { width:22px; height:22px; }
.srow.svc .amount { padding-left:5px; border-radius:9px; border-width:1px; min-width:0; }
.srow.svc .amount .cur { font-size:12.5px; }
.srow.svc .amount .cur.suff { font-size:10px; margin-left:1px; }
.srow.svc .amount .tf-in { padding:7px 1px; font-size:13px; min-width:0; flex:1; text-align:center; }
.srow.exp { display:grid; align-items:center; gap:8px 10px;
grid-template-columns:1fr auto; grid-template-areas:"name del" "tax tax"; }
.srow.exp > .tf-in { grid-area:name; min-width:0; }
.srow.exp > .amount { grid-area:tax; min-width:0; }
.srow.exp > .del { grid-area:del; }
}
/* the week, taken from the mockup: a switch decides the day, a closed day shows only the word */
.wrow { display:flex; align-items:center; gap:18px; padding:14px 0; border-bottom:1px solid var(--line); }
.wrow:last-of-type { border-bottom:0; }
.wday { width:130px; flex:none; font-size:19px; font-weight:600; color:var(--ink); }
.wday .d-sm { display:none; } /* the 3-letter form is a phone-only fallback (see the week media query) */
.wtimes { display:flex; align-items:center; gap:12px; }
.wrow.solo .wtimes { flex:1; } /* nothing to pick after them: the hours take the line */
.wrow.solo .wtime { flex:1; width:auto; }
.wdash { color:var(--soft); }
.wtime { width:130px; padding:10px 14px; font-size:17px; }
.wloc { display:flex; align-items:center; gap:8px; flex:1; } /* the studio runs to the end of the row */
.wstudio { padding:10px 12px; font-size:16px; flex:1; min-width:0; }
.wclosed { color:#bcaea6; font-size:17px; font-style:italic; }
/* On a phone the whole day fits on one line: switch, the day in its 3-letter form, the two times,
then the studio running to the edge. Everything shrinks to make the room rather than wrapping onto
three lines. A closed day is just switch, day, and the word pushed to the end. */
@media (max-width: 640px) {
.wrow { flex-wrap:nowrap; gap:7px; padding:11px 0; }
.wday { width:auto; flex:none; font-size:14px; }
.wday .d-lg { display:none; }
.wday .d-sm { display:inline; }
.wtimes { flex:none; gap:4px; }
.wtime { width:62px; flex:none; font-size:12px; padding:7px 5px; text-align:center; }
.wrow.solo .wtimes { flex:1; }
.wrow.solo .wtime { flex:1; width:auto; }
.wloc { flex:1 1 auto; min-width:0; gap:4px; }
.wloc svg { display:none; } /* the pin costs width the studio name needs more */
.wstudio { flex:1 1 auto; min-width:0; font-size:12px; padding:7px 8px; }
.wclosed { font-size:13px; margin-left:auto; }
}
.switch { width:56px; height:30px; flex:none; border:0; border-radius:20px; padding:3px; cursor:pointer;
display:flex; align-items:center; background:#d8ccc4; justify-content:flex-start; transition:all .2s; }
.switch.on { background:#4d9a6a; justify-content:flex-end; }
.switch span { width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.25); }
/* one setting on its own line: what it does on the left, the choice on the right */
.setline.first { margin-top:0; padding-top:0; border-top:0; }
.setline { display:flex; align-items:center; justify-content:space-between; gap:16px;
margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.setline b { display:block; font-size:18px; font-weight:600; color:var(--ink); }
.setline span { font-size:14px; color:var(--muted); }
.setpick { width:auto; padding:12px 16px; font-size:16px; cursor:pointer; }
.setpick.wide { max-width:340px; }
.setrow-acts { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dirty { color:#b3543f; font-size:15px; }
.btn.solid[disabled], .btn.ghost[disabled] { opacity:.45; cursor:default; }
.maplib-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.mapcard-s { border:1px solid var(--field); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.mapcard-s img { width:100%; border-radius:10px; background:var(--wash); }
.mapcard-s .del { align-self:flex-end; }
.btn.ghost[disabled] { opacity:.55; cursor:default; }
.soon { display:flex; flex-direction:column; gap:2px; padding:12px 0; border-top:1px solid var(--line); }
.soon:first-of-type { border-top:0; }
.soon b { font-size:19px; color:var(--serif); font-weight:600; }
.soon span { color:var(--muted); font-size:16px; }
/* ---- profile panel: who is signed in, and the three places that belong to her ---- */
#profile-bg { position:absolute; inset:0; z-index:60; }
.profilepanel { position:absolute; top:84px; right:20px; width:min(384px, calc(100% - 40px)); max-height:calc(100% - 120px); overflow-y:auto; background:var(--card);
border-radius:24px; padding:22px 24px; box-shadow:0 24px 60px rgba(90,60,50,.28); }
.phead { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pname { font-size:22px; font-weight:600; color:var(--deep); }
.pmail { color:var(--muted); font-size:15px; margin-top:4px; word-break:break-all; }
.pavatar { width:56px; height:56px; flex:none; border-radius:50%; overflow:hidden; background:#efe3dd; color:var(--bar);
display:flex; align-items:center; justify-content:center; font-weight:600; font-size:19px; border:2px solid #e7dcd4; }
.pavatar img { width:100%; height:100%; object-fit:cover; }
.pavatar.big { width:64px; height:64px; font-size:20px; color:var(--faint); }
.pplan { margin:15px 0 16px; font-size:16px; color:var(--muted); }
.pplan b { color:var(--bar); font-weight:600; }
/* icon and label as one centred group, with room to breathe between them */
.pitem { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; border:0;
border-radius:13px; background:#f4ebe6; color:var(--header-txt);
font:inherit; font-size:16.5px; font-weight:600; padding:12px 15px; margin-top:9px; cursor:pointer; }
.pitem svg { flex:none; display:block; width:20px; height:20px; }
.pitem > span { display:inline-flex; align-items:center; gap:8px; }
.pitem:hover { background:#eddfd7; }
.pitem em { font-style:normal; font-weight:500; font-size:14px; color:var(--faint); margin-left:0;
border:1px solid var(--field); border-radius:999px; padding:2px 9px; }
.pitem.logout { background:none; color:#c5604c; }
#avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
/* The profile panel is built at tablet sizes; on a phone it reads at the app's own scale so it does
not fill the screen with a giant name and oversized rows. */
@media (max-width: 640px) {
.profilepanel { top:70px; right:16px; padding:20px; border-radius:22px; }
.pname { font-size:20px; }
.pmail { font-size:14px; margin-top:3px; }
.pavatar { width:52px; height:52px; font-size:18px; }
.pavatar.big { width:58px; height:58px; font-size:19px; }
.pplan { font-size:14.5px; margin:14px 0 14px; }
.pitem { font-size:15.5px; padding:12px 14px; margin-top:9px; gap:10px; border-radius:12px; }
.pitem em { font-size:12px; padding:2px 8px; }
.pitem svg { width:19px; height:19px; }
}
/* Manage account, Settings & availability, and My booking page are built at tablet sizes; on a phone
they read at the app's own scale (title ~24, labels ~13, fields ~16) so more than a few rows fit and
nothing shouts. The .settingsview prefix keeps this off every other screen that shares these classes
(Finance cards, the visit editor). A first pass; each page is then fine-tuned on its own. */
@media (max-width: 640px) {
.settingsview h2.section { font-size:24px; }
/* The back control is a bare chevron: on a screen you reached in one tap, the arrow says "back"
without a line of text cluttering the top. */
.settingsview .back { font-size:0; gap:0; padding:2px 4px; }
.settingsview .back::before { content:"\2039"; font-size:30px; line-height:1; color:var(--terra); }
/* A back link belongs top-left, the title just under it (not off on the right). Stack the header
and lift the back above the title; the "Saved" flash sits out of the flow in the top corner. */
.settingsview .listhead { flex-direction:column; align-items:flex-start; gap:4px; position:relative; }
.settingsview .listhead .back { order:-1; margin:0; align-self:flex-start; }
.settingsview .listhead .saved { position:absolute; top:2px; right:0; }
.settingsview .sset { padding:18px 18px 20px; margin-bottom:14px; border-radius:18px; }
.settingsview .sset-h { font-size:16.5px; }
.settingsview .sset-hint { font-size:13px; }
.settingsview .sset-empty { font-size:13.5px; }
.settingsview .tf label { font-size:12.5px; margin-bottom:4px; }
.settingsview .tf-in { font-size:15px; padding:9px 12px; }
.settingsview .tf-read { font-size:15px; padding:9px 12px; }
.settingsview .tf-note { font-size:11.5px; }
.settingsview .setline b { font-size:15px; }
.settingsview .setline span { font-size:12.5px; }
.settingsview .switch { width:44px; height:24px; }
.settingsview .switch span { width:18px; height:18px; }
.settingsview .srow .del { width:34px; height:34px; font-size:18px; }
.settingsview .wday { font-size:14px; }
.settingsview .wtime { font-size:12px; padding:7px 5px; }
.settingsview .wstudio { font-size:12px; padding:7px 8px; }
.settingsview .palette .pswatch { height:44px; }
.settingsview .bkname { font-size:22px; }
.settingsview .bsvc-n, .settingsview .bsvc-d { font-size:13.5px; }
.settingsview .bkspec { font-size:11.5px; }
}
#avatar { overflow:hidden; padding:0; }
.photorow { display:flex; align-items:center; gap:12px; }
.newcat { grid-column:1 / -1; }
.newcat-row { display:grid; grid-template-columns:1fr 230px; gap:12px; }
.newcat .sset-hint { margin:8px 0 0; font-size:15px; }
/* ---- finance ----
Nothing here is a figure of its own: every number is read from the client files and the expense
table below. The layout follows that, headline first, then where the money came from. */
/* the periods sit in their own white pill, as in the mockup */
.periodwrap { margin:0 0 18px; }
/* Same control as the calendar's Month/Week/Day toggle: a beige track, the selected pill white. */
.periodbar { display:inline-flex; background:var(--wash-2); border-radius:40px; padding:5px; gap:2px;
max-width:100%; flex-wrap:wrap; }
.pchip { border:0; background:none; font:inherit; font-size:18px; color:#8c7d74; padding:11px 22px;
border-radius:30px; cursor:pointer; white-space:nowrap; }
.pchip.on { background:var(--card); color:var(--ink); font-weight:600; box-shadow:0 3px 8px rgba(120,90,80,.13); }
.kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:18px; }
/* On a phone the row is cut to the three figures a business is actually run on: what came in, what
it cost, and what is left. Still owed steps aside because the dashboard already carries it, in
red, on the screen she opens first; Visits is derived from the two beside it; the tax estimate is
a calculator, not a figure, and it needs room to be read. All three remain on a wider screen.
Their order in the markup is Net income, Collected, Still owed, Expenses, Visits, tax. */
@media (max-width: 640px) {
/* Two figures per row, so four cards read as a tidy 2×2 instead of three-and-a-lonely-one. Still two
rows either way, so this costs no height. */
.kpis { grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:14px; }
/* Phone keeps the figures that matter at a glance (Net, Collected, Expenses, and No-shows when there
are any); Still owed, Visits and the tax estimate live on the wider screen so the row stays light. */
.kpis .kpi.hide-phone { display:none; }
.kpis .kpi { padding:11px 11px 13px; border-radius:16px; gap:3px; }
.kpis .k-lab { font-size:12px; line-height:1.25; }
.kpis .k-val { font-size:20px; }
.kpis .k-sub { font-size:10px; line-height:1.3; }
/* The beige detail tray, the same idea as the Home dashboard: from Income down the white cards sit
on a full-width beige band that reads as the background of the detail half of the page. */
.ftray {
background:#efe4db;
margin-left:calc(-26px - env(safe-area-inset-left)); margin-right:calc(-26px - env(safe-area-inset-right));
border-radius:26px 26px 0 0;
padding:18px 26px 48px;
}
.ftray .sset:last-child { margin-bottom:0; }
/* Where you work and How you are paid both leave the phone: three columns of service / location /
method are a lot on a small screen, and only Top services matters there. Both stay on the tablet. */
.fgrid3 .sset:nth-child(2), .fgrid3 .sset:nth-child(3) { display:none; }
/* One title size on the phone, the smaller "Income by service" size: the full-width headings
(Revenue & visits, Income, Expenses) read too big otherwise. */
.sset-h { font-size:18px; }
/* The legal note is one column on a phone: two columns of small print on a 390px screen is
unreadable. Scoped under .legal to outrank the base .legal-cols rule that sits lower in the file. */
.legal .legal-cols { column-count:1; }
}
.kpi { background:var(--card); border-radius:22px; padding:20px 22px; box-shadow:var(--shadow);
display:flex; flex-direction:column; gap:5px; min-width:0; }
/* Six identical white cards said six different things in the same voice. A thin band of colour on
top names what each one is about, kept in the brand's nude range: brown is money in, red is money
still out, taupe is money spent, warm tan is the count of visits. No greens or yellows. */
.kpi { position:relative; overflow:hidden; }
/* The little accent bar on top of each card is gone in the new design; the cards carry their meaning
through their own colour now, not a stripe. Kept as a no-op rather than deleted so .kpi.good/.bad
etc. still parse. */
.kpi::before { content:none; }
.kpi.good { --accent:#9c7147; }
.kpi.bad { --accent:#C0564A; }
.kpi.spend { --accent:#8C7D74; }
.kpi.count { --accent:#c79a6e; }
.kpi.tax { --accent:#6244C4; }
.kpi.good .k-val { color:#8a5a3f; }
.kpi.bad .k-val { color:#b3543f; }
.kpi.bad .k-sub { color:#b3543f; }
.kpi.hero { background:linear-gradient(135deg, #9c7147, #6f4a2a); box-shadow:0 12px 26px rgba(120,80,45,.28); }
.k-lab { color:var(--muted); font-size:15px; }
.k-val { font-size:30px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-sub { color:var(--muted); font-size:14px; }
.kpi.hero .k-lab { color:rgba(255,255,255,.85); }
.kpi.hero .k-val { color:#fff; }
.kpi.hero .k-sub { color:rgba(255,255,255,.82); }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
/* the three breakdowns side by side: same question asked three ways, so they read as one row */
/* Flex, not a fixed 3-track grid, so the row fills evenly whether it holds two breakdowns or three
(Where you work drops out when there is only one location). */
.fgrid3 { display:flex; gap:18px; margin-bottom:18px; }
.fgrid3 > .sset { flex:1 1 0; min-width:0; }
.fgrid3 .sset { padding:20px 20px 22px; margin-bottom:0; }
.fgrid3 .sset-h { font-size:19px; }
.fgrid3 .b-head { font-size:15px; }
.fgrid3 .b-head b { font-size:16px; }
/* On a phone the three breakdowns stack, each full width, instead of three columns too narrow to read. */
@media (max-width: 640px) { .fgrid3 { grid-template-columns:1fr; gap:14px; } }
.fgrid .sset { margin-bottom:18px; }
/* the list scrolls inside its card, so ten services do not stretch the row */
/* three lines and no more: the card stays short, the rest is one scroll away */
.bars { display:flex; flex-direction:column; gap:13px; margin-top:4px; max-height:149px; overflow-y:auto; /* exactly three lines: 3 x 41 + 2 x 13 */
padding-right:4px; }
.bars-more { font-size:13px; color:var(--faint); margin-top:10px; }
/* The way out of "Not recorded": it names how many are waiting rather than nagging about them. */
.fixmethods { display:block; margin-top:12px; font-size:14px; text-align:left; }
.fixlist { display:block; }
.fixrow { display:grid; grid-template-columns:1fr 1.3fr 1.4fr auto; gap:12px; align-items:center;
width:100%; text-align:left; font:inherit; cursor:pointer; padding:13px 14px;
border:1px solid var(--field); border-radius:12px; background:var(--card); margin-bottom:8px; }
.fixrow:hover { background:var(--wash); }
.fixrow .fx-when { color:var(--muted); font-size:15px; }
.fixrow .fx-who { font-weight:600; color:var(--ink); }
.fixrow .fx-what { color:var(--muted); font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fixrow .fx-amt { font-weight:600; color:var(--serif); white-space:nowrap; }
.b-head { display:flex; justify-content:space-between; gap:12px; font-size:17px; margin-bottom:6px; }
.b-head span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.b-head b { color:var(--serif); white-space:nowrap; }
.b-track { height:10px; border-radius:999px; background:var(--wash-2); overflow:hidden; }
/* The bar wears the colour of what it counts, the same one it wears on the calendar. Flat, for the
same reason as the chart: the value does not change along the bar. */
.b-fill { height:100%; border-radius:999px; background:var(--ink, #8a5a3f); }
/* A dot repeats that colour beside the name, so the link to the calendar is readable even on the
short bars where there is almost no fill to see. */
.b-head .dot { display:inline-block; width:9px; height:9px; border-radius:3px; flex:none;
background:var(--ink, #8a5a3f); margin-right:8px; vertical-align:middle;
position:relative; top:-1px; }
/* the tax card carries its own rate, editable in place, as in the mockup */
.taxrow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.taxpick { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:15px; }
.taxin { width:56px; text-align:right; border:1.5px solid var(--field); border-radius:8px;
padding:4px 6px; font:inherit; font-size:15px; color:var(--ink); outline:0; background:#fff; }
.taxin:focus { border-color:var(--bar); }
/* recent payments: what came in, in how many goes, how, and what is still out */
.exp-table.novat .head, .exp-table.novat .line { grid-template-columns:1.1fr 2fr 1.2fr 44px; }
.srow.exp.novat { grid-template-columns:1fr 44px; }
.newcat-row.solo { grid-template-columns:1fr; }
/* six rows, then the table scrolls inside its own card: the page keeps its length whatever the
month held, and the header stays put above the rows */
.trec .tbody { max-height:330px; overflow-y:auto; }
.pay-table { margin-top:14px; }
.pay-table .head, .pay-table .line { grid-template-columns:1fr 1.25fr 1.35fr 1.15fr .85fr .8fr .95fr; }
.pay-table .line { cursor:pointer; }
.pay-table .inst .v { display:flex; flex-direction:column; gap:2px; }
.pay-table .inst b { color:var(--serif); font-weight:600; }
.pay-table .inst em { font-style:normal; font-size:13px; color:var(--muted); }
/* an archived visit still earns money, so it stays in Finance; the badge says why it is missing
from the client's own list, before she goes looking for it */
.archpill { display:inline-block; margin-left:8px; background:#efe6e0; color:#8a7166; font-size:12px;
border-radius:999px; padding:2px 9px; vertical-align:middle; }
.archnote { background:#faf4f1; border:1px solid var(--field); border-radius:12px; padding:12px 14px;
font-size:15px; line-height:1.5; color:var(--muted); }
.mpill { display:inline-block; background:var(--wash-2); color:var(--bar); font-size:14px;
margin:1px 3px 1px 0;
border-radius:999px; padding:4px 12px; white-space:nowrap; }
.exp-table .head, .exp-table .line { grid-template-columns:1.1fr 1.5fr 1fr .7fr 1fr 44px; }
.exp-line { cursor:pointer; }
.exp-tot { text-align:right; font-size:19px; font-weight:600; color:var(--serif); margin-top:12px; }
/* revenue & visits: bars for how many, a line for how much */
.chart-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.legend { display:flex; gap:18px; font-size:15px; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:6px; }
.legend .sq { width:12px; height:12px; border-radius:3px; background:#E7CFAD; display:inline-block; }
.legend .ln { width:16px; height:3px; border-radius:2px; background:#8a5a3f; display:inline-block; }
.chart { position:relative; height:240px; margin-top:16px; }
/* The line stops where the bars stop. A column reserves 14px for its label plus a 6px gap, so the
bars stand on a baseline 20px off the bottom; the line used to run to the very bottom, which put
it on a different zero from the bars it is read against, and on a short chart it crossed the day
labels outright. Same floor for both, and the labels get their strip back. */
/* The height is stated, not left to stretch: an