/* A client's own page (portal.html), and the door (my/) that borrows its cards: the twilight back-end look
   (Oct 14 2026). The shared parts (the bar, the tabs, buttons, fields, sheets, ledger rows, the toast, the footer)
   are in wf-backend.css; every color comes from wf-tokens.css (--wf-b-*). This sheet is the page's own pieces.

   One short page per tab. Home and Your project are paper sheets on the lavender mist; the working pages (Orders,
   Products, Codes, Bookings, Gift certificates, Newsletter, Payments, Ask Taya) open flat, with a heading on the
   mist and each order, code, product or booking on its own paper card, the way the approved back end shows it.
   Color only with meaning: lantern gold = needs you, teal = done, red = trouble, twilight blue = links and labels.
   No pills except buttons: a status is a small dot and a word. Gloock for names, headings and amounts; Lexend for
   everything read and typed. Phone first: one column, 44px taps, nothing wider than the screen. */

html.framed main, html.framed .toast { display: none; }
.p-card:focus, .p-card h2:focus { outline: none; }
/* a page that isn't open steps aside (hidden still means "this client doesn't have it") */
#v-project > .off-page { display: none; }
#v-project > [data-page] { scroll-margin-top: 72px; }

/* ============ the greeting (on the sign-in steps and Home) ============ */
.hello .lede .build-sign { margin-right: .3em; font-size: .95em; }
/* where we are, in one line under the name (the first screen answers "where are we?") */
.hello .lede .now-line {
  display: block; margin-top: 8px; font-weight: 500; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wf-b-link);
}

/* ============ cards: paper sheets on the mist ============ */
.p-card {
  background: var(--wf-b-sheet); border: 1px solid var(--wf-b-rule); border-radius: var(--wf-r-sheet);
  padding: 22px 24px 24px; margin-top: 16px; scroll-margin-top: 72px; box-shadow: var(--wf-b-shadow); min-width: 0;
}
#v-project > .p-card:first-child, #v-project > .off-page + .p-card { margin-top: 0; }
.p-card h2 { font-size: clamp(22px, 3.4vw, 26px); line-height: 1.18; }
.p-card > p { margin: 10px 0 0; }
.p-card .kicker { margin-bottom: 6px; }
.p-card h2.kicker { font-family: var(--wf-font-work); font-size: var(--wf-b-kicker-size); line-height: 1.4; }
.btn.wide { margin-top: 18px; }
.p-card .sh { margin: 0 0 12px; }

/* the working pages open flat: the heading sits on the mist, the things in them are paper cards */
#sec-products, #sec-orders, #sec-codes, #sec-gifts, #sec-bookings, #sec-news, #sec-pay, #sec-change {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-top: 0;
}
#sec-products > h2, #sec-orders > h2, #sec-codes > h2, #sec-gifts > h2, #sec-bookings > h2, #sec-news > h2, #sec-pay > h2, #sec-change > h2 {
  font-size: var(--wf-b-h1); margin-bottom: 4px;
}
/* room under the greeting: the sign-in cards and the project */
#v-email, #v-code, #v-offline { margin-top: 8px; }
.demo-bar:not([hidden]) ~ #v-email, .demo-bar:not([hidden]) ~ #v-code, .demo-bar:not([hidden]) ~ #v-offline { margin-top: 8px; }

/* a quiet link-like button */
.later {
  background: none; border: 0; padding: 0 4px; min-height: 44px; cursor: pointer; color: var(--wf-b-link);
  font-family: var(--wf-font-work); font-weight: 400; font-size: 15.5px; text-align: left;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.later:hover { text-decoration-thickness: 2px; }
.later:disabled { color: var(--wf-b-ink-soft); cursor: default; text-decoration: none; }
a.later { display: inline-flex; align-items: center; gap: 7px; }
.later svg { width: 15px; height: 15px; flex: none; }

/* the outline buttons (Open, Change, Add a product): quiet, twilight blue */
.pick, .open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 7px 18px;
  border-radius: var(--wf-r-pill); border: 1.5px solid currentColor; color: var(--wf-b-link); background: var(--wf-b-sheet); cursor: pointer;
  font-family: var(--wf-font-work); font-weight: 500; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.pick:hover, .open-btn:hover { background: var(--wf-b-leaf-tint); }
.pick svg, .open-btn svg { width: 16px; height: 16px; flex: none; }
.pick[aria-disabled="true"], .open-btn[aria-busy="true"] { border-style: dashed; color: var(--wf-b-ink-soft); background: transparent; cursor: wait; }
.open-btn:disabled { opacity: .45; cursor: default; }

/* ============ fields (the shared ones are in wf-backend.css) ============ */
.count { margin: 6px 0 0; font-weight: 500; font-size: 12.5px; letter-spacing: .04em; color: var(--wf-b-ink-soft); text-align: right; }
.count:empty { display: none; }
.count.near { color: var(--wf-b-due-ink); }
.err::before { content: "\2740  "; content: "\2740  " / ""; }

/* ============ sign in ============ */
.signin { max-width: 540px; margin-inline: auto; }
#main > .signin, #main > .calm { margin-inline: 0; }
.si-head { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
.si-head .kicker { margin-bottom: 4px; }
.face {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 2px var(--wf-b-sheet), 0 0 0 3.5px var(--wf-b-leaf);
}
.si-lead { margin: 10px 0 0; font-size: 16.5px; color: var(--wf-b-ink-soft); }
.si-lead b { color: var(--wf-b-ink); font-weight: 500; overflow-wrap: anywhere; }
.si-small { margin: 14px 0 0; font-size: 15px; color: var(--wf-b-ink-soft); }
.si-small:empty { display: none; }
.si-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 12px; }
#b-phone { margin-top: 6px; }
input.code-input {
  font-weight: 500; font-size: 28px; letter-spacing: .34em; text-align: center; padding-left: calc(12px + .34em);
  max-width: 280px; min-height: 60px; font-variant-numeric: tabular-nums;
}
.notice { margin: 18px 0 0 !important; padding: 12px 14px; border-radius: 12px; background: var(--wf-b-well); font-size: 15.5px; line-height: 1.5; }
.demo-hint {
  margin-top: 18px; padding: 12px 14px 6px; border-radius: 12px; border: 1px dashed var(--wf-b-due-edge);
  background: var(--wf-b-due-tint); color: var(--wf-b-due-ink); font-size: 15px; line-height: 1.5;
}
.demo-hint p { margin: 0; }
.demo-hint b { font-weight: 500; }

/* ============ the demo bar (only while DEMO is on): a small label and a little menu ============ */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 18px; position: relative; z-index: 30; }
.preview-pill {
  display: inline-block; padding: 5px 12px; border-radius: 8px; border: 1px dashed var(--wf-b-due-edge);
  background: var(--wf-b-due-tint); color: var(--wf-b-due-ink); font-weight: 500; font-size: 12.5px; letter-spacing: .04em; line-height: 1.5;
}
.demo-menu { position: relative; }
.demo-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--wf-r-pill); border: 1.5px solid currentColor; color: var(--wf-b-link); background: var(--wf-b-sheet); font-weight: 500; font-size: 15px;
}
.demo-menu summary::-webkit-details-marker { display: none; }
.demo-menu summary::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s ease;
}
.demo-menu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.demo-list {
  position: absolute; left: 0; top: calc(100% + 8px); width: min(290px, calc(100vw - 32px)); z-index: 40; display: grid;
  background: var(--wf-b-sheet); border: 1px solid var(--wf-b-rule); border-radius: 16px; padding: 8px; box-shadow: 0 24px 50px -16px rgb(38 42 94 / .45);
}
@media (min-width: 560px) { .demo-list { left: auto; right: 0; } }
.demo-list .demo-k { margin: 8px 10px 4px; font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-b-ink-soft); }
.demo-list button { text-align: left; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; color: var(--wf-b-ink); font-size: 15.5px; }
.demo-list button:hover { background: var(--wf-b-well); }
.demo-list button[aria-current="true"] { color: var(--wf-b-link); font-weight: 500; }
.demo-list button[aria-current="true"]::after { content: "  \2713"; content: "  \2713" / ""; }
.demo-list button:focus-visible { outline-offset: -2px; }

/* ============ loading: soft placeholder cards that breathe ============ */
.loading { padding-top: 4px; }
/* a saved sign-in, while the project is on its way (portal.js): the page keeps the footer below the first screen,
   and on wider screens the bar keeps the room its tabs will take, so nothing jumps when the project arrives */
html.wf-arriving .page { min-height: 100vh; min-height: 100svh; }
@media (min-width: 761px) { html.wf-arriving .top { padding-bottom: 48px; } }
.ghost i { display: block; height: 16px; border-radius: 8px; background: var(--wf-b-well); margin-top: 14px; animation: ghost 1.6s ease-in-out infinite alternate; }
.ghost i:first-child { width: 34%; height: 12px; margin-top: 0; }
.ghost i.short { width: 62%; }
@keyframes ghost { from { opacity: .5; } to { opacity: 1; } }

/* ============ calm cards (can't reach the portal) ============ */
.calm { text-align: center; }
.calm p { max-width: 30em; margin-inline: auto; color: var(--wf-b-ink-soft); }
.calm .btn { margin-top: 20px; }
.big-moon { width: 40px; height: 40px; color: var(--wf-b-leaf); }
.calm h2 { margin-top: 12px; }

/* ============ whose turn it is (the magic mockup step) ============ */
.turn p { color: var(--wf-b-ink-soft); max-width: 34em; }
.turn .turn-act { margin-top: 18px; }
/* their turn: a gold edge (gold = needs you) */
.turn:has(#turn-btn:not(.secondary)) { border-color: var(--wf-b-due-edge); box-shadow: var(--wf-b-shadow), inset 4px 0 0 var(--wf-b-due); }

/* ============ Needs you (Home) ============ */
.needs .ledger { border: 0; border-radius: 0; box-shadow: none; background: none; margin: 0 -24px -24px; }
.needs .ledger > li:first-child { border-top: 1px solid var(--wf-b-rule); }
.needs .ledger > li { padding: 12px 24px; }
.needs-calm { margin: 4px 0 0 !important; color: var(--wf-b-ink-soft); }
@media (max-width: 600px) { .needs .ledger { margin: 0 -18px -20px; } .needs .ledger > li { padding: 12px 18px; } }
@media (max-width: 380px) { .needs .ledger { margin: 0 -16px -18px; } .needs .ledger > li { padding: 12px 16px; } }
.glance dd.d { font-family: var(--wf-font-work); font-size: 13.5px; color: var(--wf-b-ink-soft); }
@media (max-width: 600px) {
  .glance { grid-template-columns: 1fr 1fr; }
  .glance div:nth-child(3) { border-left: 0; padding-left: 0; }
  .glance div:nth-child(n+3) { border-top: 1px solid var(--wf-b-rule); margin-top: 8px; padding-top: 10px; }
}

/* ============ texts (sign in with a text) ============ */
.texts-why, .texts-now { color: var(--wf-b-ink-soft); }
.texts-agree { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--wf-b-ink-soft); cursor: pointer; }
.texts-agree input { width: 20px; height: 20px; margin: 2px 0 0; }
.texts-fine { margin: 10px 0 16px; font-size: 14.5px; }

/* ============ a note from Taya ============ */
.taya-note { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; background: var(--wf-b-note-bg); }
.taya-note .kicker { margin: 4px 0 6px; }
.note-text { margin: 0 !important; font-size: 17.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.note-date { margin: 8px 0 0 !important; font-size: 13.5px; color: var(--wf-b-ink-soft); }
.note-date:empty { display: none; }

/* ============ your list: ledger rows in the sheet ============ */
.todos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.todo { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--wf-b-rule); scroll-margin-top: 72px; min-width: 0; }
.todo:first-child { border-top: 0; padding-top: 6px; }
/* each thing to do: an empty ring, ready to fill; a payment's is gold (it needs you) */
.todo .mk { width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--wf-b-leaf); }
/* sent: half filled, waiting for Taya's look */
.todo.sent .mk { background: linear-gradient(90deg, transparent 50%, var(--wf-b-leaf) 50%); }
.todo.pay .mk { box-shadow: inset 0 0 0 2px var(--wf-b-due-edge), 0 0 0 4px var(--wf-b-due-tint); }
.todo h3 { font-size: 18.5px; line-height: 1.3; overflow-wrap: anywhere; }
.todo .detail { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--wf-b-ink-soft); overflow-wrap: anywhere; }
.todo .act { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.todo .thanks-line { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 15.5px; line-height: 1.45; }
.todo .thanks-line svg { width: 18px; height: 18px; color: var(--wf-b-done); flex: none; margin-top: 2px; }
.todo .said { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wf-b-well); font-size: 15.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.todo .answer-box { margin-top: 12px; width: 100%; }
.todo .answer-box .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.todo .progress { margin: 10px 0 0; font-size: 15px; color: var(--wf-b-ink-soft); }
.todo .progress:empty { display: none; }
.todo .hint { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--wf-b-ink-soft); }
.todo .substeps { margin: 8px 0 0; padding-left: 1.4em; display: grid; gap: 2px; font-size: 15.5px; line-height: 1.45; }
.todo .substeps li::marker { color: var(--wf-b-link); font-weight: 500; font-size: 13px; }
/* a step's few how-to lines, right in the list */
details.howto { margin-top: 10px; }
details.howto summary, details.done-fold summary {
  cursor: pointer; color: var(--wf-b-link); font-weight: 500; font-size: 15px;
  min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; width: fit-content; max-width: 100%;
}
details.howto summary::-webkit-details-marker, details.done-fold summary::-webkit-details-marker { display: none; }
details.howto summary::before, details.done-fold summary::before {
  content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .25s ease; margin-right: 4px;
}
details.howto[open] summary::before, details.done-fold[open] summary::before { transform: rotate(45deg); }
details.howto ol, details.howto ul { margin: 2px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.5; }
details.howto li::marker { color: var(--wf-b-link); }
.todo .up-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.todo .up-input:focus-visible + .pick-btn { outline: 2px solid var(--wf-b-focus); outline-offset: 3px; }
.empty {
  display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0 !important; padding: 16px; border-radius: 14px;
  background: var(--wf-b-sheet); border: 1px dashed var(--wf-b-rule); font-size: 16px; line-height: 1.5;
}
.p-card .empty { background: var(--wf-b-well); border: 0; }
.empty svg { width: 22px; height: 22px; color: var(--wf-b-leaf); flex: none; margin-top: 1px; }
.empty .empty-body { min-width: 0; }
.empty .whats-next { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wf-b-rule); font-size: 15.5px; line-height: 1.5; color: var(--wf-b-ink-soft); }
.empty .whats-next:empty { display: none; }
.empty .whats-next b { color: var(--wf-b-link); font-weight: 500; }
details.done-fold { margin-top: 10px; }
.done-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.done-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15.5px; color: var(--wf-b-ink-soft); line-height: 1.45; }
.done-list li span.m { width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--wf-b-done); color: #fff; }
.done-list li span.m svg { width: 12px; height: 12px; }

/* ============ where we are: the path, with a gold dot where we are now ============ */
.tl { list-style: none; margin: 20px 0 0; padding: 0; }
.tl li { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding-bottom: 20px; }
.tl li:last-child { padding-bottom: 0; }
/* the thread between the dots: teal where we've been, faint ahead */
.tl li::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; transform: translateX(-50%); background: var(--wf-b-rule); border-radius: 2px; }
.tl li.done::after { background: var(--wf-b-done); opacity: .55; }
.tl li:last-child::after { display: none; }
.tl .dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--wf-b-leaf); background: var(--wf-b-sheet); }
.tl .dot svg { width: 16px; height: 16px; }
.tl .done .dot { background: var(--wf-b-done); color: #fff; box-shadow: none; }
.tl .now .dot { background: var(--wf-b-due); box-shadow: 0 0 0 5px var(--wf-b-due-tint), 0 0 18px -2px rgb(238 176 74 / .6); }
.tl .now .dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--wf-on-gold); }
.tl .name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--wf-font-display); font-size: 18px; line-height: 1.3; min-height: 30px; }
.tl .next .name { color: var(--wf-b-ink-soft); }
.tl .when { display: block; margin-top: 1px; font-weight: 500; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--wf-b-ink-soft); }
.tl .when:empty { display: none; }
.tl .now .when { color: var(--wf-b-due-ink); }
.tl .say { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--wf-b-ink-soft); }
/* "Now": a word with a gold dot, not a pill */
.now-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--wf-font-work); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-b-due-ink); }
.now-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wf-b-due); }
.tl-after { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0 !important; padding: 12px 14px; border-radius: 12px; background: var(--wf-b-well); font-size: 16px; line-height: 1.5; }
.tl-after svg { width: 22px; height: 22px; color: var(--wf-b-done); flex: none; margin-top: 1px; }
.tl-after + .tl { margin-top: 18px; }
.tl-more { margin-top: 6px; }

/* ============ your things ============ */
.things { list-style: none; margin: 12px 0 0; padding: 0; }
.thing { display: grid; grid-template-columns: 38px 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--wf-b-rule); }
.thing:last-child { border-bottom: 0; padding-bottom: 0; }
.thing .ico { grid-row: 1 / span 2; align-self: start; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--wf-b-leaf-tint); color: var(--wf-b-link); }
.thing .ico svg { width: 21px; height: 21px; }
.thing .t-name { font-family: var(--wf-font-display); font-size: 17.5px; line-height: 1.3; }
.thing .t-sub { grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--wf-b-ink-soft); overflow-wrap: anywhere; }
.thing .t-act { grid-column: 3; grid-row: 1 / span 2; justify-self: end; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; }
.thing.waiting .ico { background: transparent; box-shadow: inset 0 0 0 1px var(--wf-b-rule); color: var(--wf-b-ink-soft); }
.thing.waiting .t-name { color: var(--wf-b-ink-soft); }
.receipts { list-style: none; margin: 6px 0 0; padding: 0; grid-column: 2 / -1; display: grid; gap: 2px; }
.receipts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; font-size: 15.5px; }
@media (max-width: 460px) {
  .thing { grid-template-columns: 38px 1fr; }
  .thing .t-act { grid-column: 2; grid-row: auto; justify-self: start; justify-content: flex-start; margin-top: 8px; }
  .receipts { grid-column: 2; }
}

/* ============ the paper cards on the working pages ============ */
.order, .dc, .pr, .payrow, .asks li, .gift-card, .bk-day, .bk-dayinfo {
  background: var(--wf-b-sheet); border: 1px solid var(--wf-b-rule); border-radius: 16px; box-shadow: var(--wf-b-shadow); min-width: 0;
}
/* the forms on those pages: paper sheets too */
.dc-form, .pr-form, .dc-set, .gift-find, .bk-off-form, #f-bk-hours, .bk-form, .nl-editor, #f-change, .got-it, .nl-preview:not([hidden]) {
  background: var(--wf-b-sheet); border: 1px solid var(--wf-b-rule); border-radius: var(--wf-r-sheet); box-shadow: var(--wf-b-shadow);
  padding: 4px 20px 20px; margin-top: 14px; min-width: 0;
}
.nl-preview:not([hidden]) { padding-top: 16px; }
/* a sub-heading on a page */
.small-h { margin: 32px 0 0; font-family: var(--wf-font-display); font-size: 21px; line-height: 1.2; color: var(--wf-b-ink); }
.dc-form .small-h, .pr-form .small-h, .bk-form .small-h, .nl-editor > .small-h:first-child { margin: 16px 0 0; }
.bk-panel > .small-h:first-child { margin-top: 6px; }
.gift-card .small-h, .nl-send .small-h { margin-top: 20px; font-size: 18px; }
.orders-test {
  margin: 12px 0 0; padding: 9px 14px; border-radius: 10px; border: 1px dashed var(--wf-b-due-edge);
  background: var(--wf-b-due-tint); color: var(--wf-b-due-ink); font-size: 14.5px; line-height: 1.45;
}
.orders-fine { margin: 8px 0 0; color: var(--wf-b-ink-soft); font-size: 15px; line-height: 1.5; max-width: 44em; }

/* ============ payments ============ */
.pays { display: grid; gap: 14px; margin-top: 18px; }
.payrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: baseline; padding: 18px 20px; }
.payrow .p-name { font-family: var(--wf-font-display); font-size: 19px; line-height: 1.3; }
.payrow .p-amt { font-family: var(--wf-font-display); font-size: 22px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payrow .p-sub { grid-column: 1 / -1; font-size: 15px; line-height: 1.45; color: var(--wf-b-ink-soft); }
.payrow .p-state { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; font-size: 15.5px; }
.p-paid { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--wf-b-done); }
.p-paid svg { width: 15px; height: 15px; }
.p-later { font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--wf-b-ink-soft); }
/* due: a gold edge (gold = needs you) */
.payrow.st-due { border-color: var(--wf-b-due-edge); box-shadow: var(--wf-b-shadow), inset 4px 0 0 var(--wf-b-due); }
.payrow.st-paid .p-amt { color: var(--wf-b-ink-soft); }
.payrow .p-thanks { display: flex; align-items: flex-start; gap: 8px; margin: 0; width: 100%; font-size: 15.5px; line-height: 1.45; }
.payrow .p-thanks svg { width: 18px; height: 18px; color: var(--wf-b-done); flex: none; margin-top: 2px; }
.pay-fine { font-size: 14.5px !important; color: var(--wf-b-ink-soft); margin-top: 14px !important; }
@media (max-width: 420px) { .payrow .btn { width: 100%; } }
/* Web Faery billing (Oct 16 2026): Stripe said the last subscription payment didn't go through */
.payrow.has-trouble { border-color: var(--wf-b-due-edge); box-shadow: var(--wf-b-shadow), inset 4px 0 0 var(--wf-b-due); }
.payrow .p-trouble { margin: 0; width: 100%; font-size: 15.5px; line-height: 1.45; font-weight: 500; color: var(--wf-b-due-ink); }
.payrow .p-manage[aria-busy="true"] { color: var(--wf-b-ink-soft); cursor: wait; }

/* ============ ask for a change ============ */
.promise { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--wf-b-ink); max-width: 38em; }
.drop { position: relative; margin-top: 2px; border: 1.5px dashed var(--wf-b-edge); border-radius: 14px; background: var(--wf-b-well); padding: 16px; text-align: center; }
.drop input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.drop:has(input:focus-visible) .pick { outline: 2px solid var(--wf-b-focus); outline-offset: 3px; }
.pic-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.pic-list:empty { display: none; }
.pic-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; padding: 4px 4px 4px 12px; border-radius: 10px; background: var(--wf-b-sheet); }
.pic-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pic-list button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: none; color: var(--wf-b-ink-soft); display: grid; place-items: center; }
.pic-list button svg { width: 14px; height: 14px; }
.pic-list button:hover { color: var(--wf-b-ink); }
.pic-list button:focus-visible { outline-offset: -2px; }
.got-it { padding: 22px 20px 14px; text-align: center; }
.got-it:focus { outline: none; }
.got-it .big-moon { color: var(--wf-b-done); }
.got-it .got-h { margin: 10px 0 0; font-family: var(--wf-font-display); font-size: 22px; }
.got-it p { margin: 8px auto 0; max-width: 30em; font-size: 16px; line-height: 1.5; }
.got-it .later { margin-top: 8px; text-align: center; }
.asks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.asks li { padding: 14px 18px; }
.asks .a-what { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.asks .a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.asks .a-date, .asks .a-where { font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-b-ink-soft); overflow-wrap: anywhere; }
.asks .a-reply { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--wf-b-rule); font-size: 15.5px; line-height: 1.5; }
.asks .a-reply img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.asks .a-reply p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* where an ask stands: a dot and a word (gold when it waits on them, teal when it's done) */
.pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--wf-b-ink-soft); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-b-leaf); flex: none; }
.pill.quoted { color: var(--wf-b-due-ink); }
.pill.quoted::before { background: var(--wf-b-due); }
.pill.doing { color: var(--wf-b-link); }
.pill.doing::before { background: var(--wf-b-link); }
.pill.done { color: var(--wf-b-done); }
.pill.done::before { background: var(--wf-b-done); }
#change-email p { margin: 12px 0 0; font-size: 16.5px; }
#change-email .btn { margin-top: 18px; }

/* ============ your shop's orders (Oct 8 2026) ============ */
.orders { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.order { padding: 16px 20px 14px; }
/* not packed yet: a gold edge (needs you) */
.order:not(.packed):not(.bk):not(.nl-row) { border-color: var(--wf-b-due-edge); box-shadow: var(--wf-b-shadow), inset 4px 0 0 var(--wf-b-due); }
.order .o-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.order .o-date { font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-b-link); }
.order .o-total { font-family: var(--wf-font-display); font-size: 22px; white-space: nowrap; }
.order .o-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.order .o-items li { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; line-height: 1.45; }
.order .o-what { min-width: 0; overflow-wrap: anywhere; }
.order .o-cost { color: var(--wf-b-ink-soft); white-space: nowrap; }
.order .o-ship { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--wf-b-well); }
.order .o-label { display: block; font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-b-link); }
.order .o-addr { margin: 4px 0 0; font-style: normal; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.order .o-addr span { display: block; }
.order .o-gone, .order .o-opt { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--wf-b-ink-soft); overflow-wrap: anywhere; }
.order .o-warn { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wf-b-due-tint); color: var(--wf-b-due-ink); font-size: 15px; line-height: 1.45; }
.order .o-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; }
.o-packed { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 6px; cursor: pointer; font-size: 16px; }
.o-packed input { width: 22px; height: 22px; margin: 0; accent-color: var(--wf-b-done); cursor: pointer; flex: none; }
.order.packed .o-packed span { color: var(--wf-b-done); font-weight: 500; }
.orders-csv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 16px 0 0; color: var(--wf-b-ink-soft); font-size: 15px; }
.orders-csv .later { min-height: 44px; }
.orders-csv .later[aria-busy="true"] { color: var(--wf-b-ink-soft); cursor: wait; }
@media (max-width: 420px) { .order .o-act .open-btn { width: 100%; } }

/* ============ shipped, packing slips, discount codes, free shipping (Oct 10 2026) ============ */
.order .o-code { margin: 6px 0 0; font-size: 15px; color: var(--wf-b-link); }
.order .o-note { margin-top: 10px; }
.order .o-note p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.order .o-shipped { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wf-b-well); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.order .o-shipped .later { display: inline-flex; min-height: 44px; vertical-align: middle; }
.order .o-mailed { display: block; color: var(--wf-b-ink-soft); }
.order .o-mailed:empty { display: none; }
.order .o-act2 { justify-content: flex-start; margin-top: 6px; }
.ship-form { margin-top: 12px; padding: 4px 14px 14px; border-radius: 12px; border: 1px dashed var(--wf-b-edge); background: var(--wf-b-sheet); box-shadow: none; }
.ship-form .field-label { margin-top: 14px; }
.ship-form .o-hint { margin: 12px 0 0; color: var(--wf-b-ink-soft); font-size: 14.5px; line-height: 1.45; }
.dc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; }
.dcs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.dc { padding: 14px 18px 10px; }
.dc .dc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.dc .dc-name { font-family: var(--wf-font-display); font-size: 19px; letter-spacing: .03em; overflow-wrap: anywhere; min-width: 0; }
.dc .dc-off { font-family: var(--wf-font-display); font-size: 18px; white-space: nowrap; }
.dc .dc-meta { margin: 6px 0 0; color: var(--wf-b-ink-soft); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.dc .o-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 8px; }
.dc.st-off .dc-name, .dc.st-ended .dc-name, .dc.st-used_up .dc-name, .dc.st-off .dc-off, .dc.st-ended .dc-off, .dc.st-used_up .dc-off { color: var(--wf-b-ink-soft); }
.dc.st-on .dc-on span, .dc.st-scheduled .dc-on span { color: var(--wf-b-done); font-weight: 500; }
.dc-new { margin: 16px 0 0; }
.dc-kind { border: 0; margin: 0; padding: 0; min-width: 0; }
.dc-row { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.dc-radio, .dc-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 16px; }
.dc-check { display: flex; margin-top: 10px; line-height: 1.35; }
.dc-radio input, .dc-check input { width: 22px; height: 22px; margin: 0; flex: none; cursor: pointer; }
.dc-amt { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 16.5px; }
.dc-amt input { max-width: 9em; }
.dc-dates { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .dc-dates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .dc .o-act .open-btn, .order .o-act2 .open-btn { flex: 1 1 auto; } }
@media print { #sec-codes, .order .o-act2, .ship-form { display: none !important; } }

/* gift certificates (Oct 10 2026) */
.gift-find { padding-bottom: 16px; }
.gift-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.gift-find-row input { flex: 1 1 12em; max-width: 18em; letter-spacing: .08em; text-transform: uppercase; font-family: var(--wf-font-mono); }
.gift-card { margin-top: 16px; padding: 16px 20px 14px; }
.gift-card:focus { outline: none; }
.gift-card:focus-visible { outline: 2px solid var(--wf-b-focus); outline-offset: 3px; }
.gift-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.gift-code { font-family: var(--wf-font-mono); font-size: 18px; letter-spacing: .08em; overflow-wrap: anywhere; }
.gift-state { font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--wf-b-link); }
.gift-bal { margin: 10px 0 0; }
.gift-left { font-family: var(--wf-font-display); font-size: 34px; line-height: 1.1; }
.gift-of { color: var(--wf-b-ink-soft); font-size: 16px; }
.gift-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wf-b-well); font-size: 15px; line-height: 1.45; }
.gift-use .field-label { margin-top: 16px; }
.gift-use .dc-btns .later { min-height: 44px; }
.gift-uses { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.gift-uses li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 15.5px; line-height: 1.45; }
.gift-use-what { min-width: 0; overflow-wrap: anywhere; }
.gift-use-left { color: var(--wf-b-ink-soft); white-space: nowrap; }
.gift-row .dc-name { font-family: var(--wf-font-mono); font-size: 17px; }
.gift-row.st-redeemed .dc-name, .gift-row.st-refunded .dc-name { color: var(--wf-b-ink-soft); }
@media print { #f-gift, .gift-use { display: none !important; } }

/* ============ your shop's products (Oct 10 2026) ============ */
.pr-new { margin: 16px 0 0; }
.prs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.pr { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px 16px; }
.pr .pr-pic { grid-row: 1 / span 2; align-self: start; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--wf-b-leaf-tint); display: grid; place-items: center; color: var(--wf-b-link); }
.pr .pr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr .pr-pic svg { width: 24px; height: 24px; }
.pr .pr-main { min-width: 0; }
.pr .pr-title { margin: 0; font-family: var(--wf-font-display); font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.pr .pr-line { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 15px; line-height: 1.45; }
.pr .pr-price { white-space: nowrap; font-weight: 500; }
.pr .pr-stock { color: var(--wf-b-ink-soft); overflow-wrap: anywhere; min-width: 0; }
.pr .pr-act { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
/* where a product stands: a dot and a word */
.pr .pr-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; letter-spacing: .04em; color: var(--wf-b-ink-soft); }
.pr .pr-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wf-b-rule); flex: none; }
.pr.st-live .pr-status { color: var(--wf-b-done); }
.pr.st-live .pr-status::before { background: var(--wf-b-done); }
.pr.st-scheduled .pr-status { color: var(--wf-b-due-ink); }
.pr.st-scheduled .pr-status::before { background: var(--wf-b-due); }
.pr.st-sold_out .pr-status { color: var(--wf-b-trouble); }
.pr.st-sold_out .pr-status::before { background: var(--wf-b-trouble); }
.pr.st-sold_out .pr-title, .pr.st-draft .pr-title { color: var(--wf-b-ink-soft); }
@media (min-width: 640px) {
  .pr { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .pr .pr-pic { grid-row: auto; width: 72px; height: 72px; }
  .pr .pr-act { grid-column: auto; justify-content: flex-end; }
}
.pr-set { border: 0; margin: 20px 0 0; padding: 0; min-width: 0; }
.pr-set > legend.field-label { margin: 0 0 8px; padding: 0; }
.pr-form .pr-set:first-of-type { margin-top: 14px; }
.pr-hint { margin: 10px 0 0; color: var(--wf-b-ink-soft); font-size: 14.5px; line-height: 1.45; }
.pr-photos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pr-photos:empty { display: none; }
.pr-photos .ph { position: relative; border-radius: 12px; overflow: hidden; background: var(--wf-b-well); border: 1px solid var(--wf-b-rule); }
.pr-photos .ph.lead { border-color: var(--wf-b-link); }
.pr-photos .ph img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pr-photos .ph-btns { display: flex; justify-content: space-between; gap: 4px; padding: 4px; }
.pr-photos .ph-btns button { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 10px; border: 0; background: none; color: var(--wf-b-link); cursor: pointer; display: grid; place-items: center; }
.pr-photos .ph-btns button:hover { background: var(--wf-b-sheet); }
.pr-photos .ph-btns button:disabled { color: var(--wf-b-ink-soft); opacity: .35; cursor: default; background: none; }
.pr-photos .ph-btns button:focus-visible { outline-offset: -2px; }
.pr-photos .ph-btns svg { width: 18px; height: 18px; }
.pr-photos .ph-btns .ph-del { position: absolute; top: 4px; right: 4px; border-radius: 50%; background: rgb(var(--wf-ground-rgb) / .72); color: #fff; }
.pr-photos .ph-btns .ph-del:hover { background: rgb(var(--wf-ground-rgb) / .9); }
.pr-photos .ph.lead::after {
  content: "First"; position: absolute; top: 8px; left: 8px; padding: 2px 8px 3px; border-radius: 6px;
  background: var(--wf-b-sheet); color: var(--wf-b-link); font-weight: 500; font-size: 12px; letter-spacing: .04em;
}
.pr-photos .ph-left svg { transform: rotate(90deg); }
.pr-photos .ph-right svg { transform: rotate(-90deg); }
.pr-file { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pr-add-photo:has(.pr-file:focus-visible) { outline: 2px solid var(--wf-b-focus); outline-offset: 3px; }
.pr-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-opts:empty { display: none; }
.pr-opt { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em 44px; gap: 8px; align-items: center; }
.pr-opt.no-count { grid-template-columns: minmax(0, 1fr) 44px; }
.pr-opt input { min-width: 0; }
.pr-opt-del { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--wf-b-ink-soft); cursor: pointer; display: grid; place-items: center; }
.pr-opt-del:hover { color: var(--wf-b-link); background: var(--wf-b-well); }
.pr-opt-del svg { width: 18px; height: 18px; }
#b-pr-opt-add { margin-top: 6px; }
.pr-num { max-width: 9em; }
.pr-radio { display: flex; }
.pr-form input[type="datetime-local"] { max-width: 20em; }
.pr-progress { margin: 12px 0 0; color: var(--wf-b-due-ink); font-size: 15px; }
@media print { #sec-products { display: none !important; } }

/* ============ the footer's sign-out line ============ */
#foot-out .later { font-size: inherit; font-weight: 500; min-height: 44px; }
#me-email { overflow-wrap: anywhere; color: var(--wf-b-ink); }

/* ============ the project rises in gently, card by card ============ */
.rise { animation: rise .7s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============ phones ============ */
@media (max-width: 600px) {
  .p-card { padding: 20px 18px 20px; }
  .taya-note { grid-template-columns: 44px 1fr; gap: 14px; }
  .taya-note .face { width: 44px; height: 44px; }
  .si-head { grid-template-columns: 48px 1fr; gap: 12px; }
  .si-head .face { width: 48px; height: 48px; }
  .note-text { font-size: 17px; }
  .order, .payrow { padding: 16px; }
  .dc-form, .pr-form, .dc-set, .gift-find, .bk-off-form, #f-bk-hours, .bk-form, .nl-editor, #f-change { padding: 2px 16px 16px; }
}
@media (max-width: 380px) {
  .p-card { padding: 18px 16px; }
  .todo { grid-template-columns: 20px 1fr; gap: 10px; }
  .todo .mk { width: 18px; height: 18px; }
  .tl li { grid-template-columns: 26px 1fr; gap: 12px; }
  .tl .dot { width: 26px; height: 26px; }
  .tl li::after { left: 13px; top: 30px; }
  .tl .name { min-height: 26px; font-size: 17px; }
  input.code-input { font-size: 25px; letter-spacing: .28em; padding-left: calc(12px + .28em); }
}

/* ============ calm for those who ask for it ============ */
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .ghost i { animation: none; opacity: .75; }
  details.done-fold summary::before, details.howto summary::before, .demo-menu summary::after { transition: none; }
}

/* ============ print: just the project, on white paper ============ */
@media print {
  .demo-bar, .skip-link, #sec-change form, .todo .act, .answer-box, #foot-out, .tl-more, #sec-needs { display: none !important; }
  /* whichever tab is open, the project and its payments print */
  #v-project > .off-page[data-page="project"]:not([hidden]), #v-project > .off-page[data-page="payments"]:not([hidden]) { display: block; }
  #tl { display: block !important; }
  .p-card, .todo, .payrow, .asks li, .order, .dc, .pr { background: #fff; border-color: #ccc; box-shadow: none; }
  .rise { animation: none !important; }
}

/* ============ your bookings (Oct 10 2026) ============ */
.bk .bk-svc { font-family: var(--wf-font-work); font-weight: 500; font-size: 16px; text-align: right; overflow-wrap: anywhere; min-width: 0; color: var(--wf-b-due-ink); }
.bk .o-head { flex-wrap: wrap; }
.bk .o-date { color: var(--wf-b-ink); font-family: var(--wf-font-display); font-weight: 400; font-size: 18px; letter-spacing: 0; text-transform: none; }
.bk .bk-who { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 16px; line-height: 1.45; }
.bk .bk-who .bk-name { font-weight: 500; }
.bk .bk-who .later { min-height: 44px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.bk.bk-gone .o-date, .bk.bk-gone .bk-svc { color: var(--wf-b-ink-soft); text-decoration: line-through; }
.bk .dc-meta { margin: 8px 0 0; color: var(--wf-b-ink-soft); font-size: 15px; line-height: 1.45; }
.bk-past { margin: 16px 0 0; }
.bk-past summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; color: var(--wf-b-link); }
.bk-off-form { margin-top: 12px; }
.bk-off-label { font-size: 16.5px; }
.bk-week { display: grid; gap: 10px; margin: 12px 0 0; }
#f-bk-hours { padding-top: 16px; }
#f-bk-hours .bk-day { box-shadow: none; }
.bk-day { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 14px; border-radius: 12px; }
.bk-dayname { font-family: var(--wf-font-display); font-size: 17px; }
.bk-wins { display: grid; gap: 6px; }
.bk-win { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.bk-win input[type="time"] { width: 100%; min-width: 0; padding-left: 8px; padding-right: 6px; }
@media (max-width: 520px) {
  .bk-win { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 6px; }
  .bk-win .later { grid-column: 1 / -1; justify-self: start; }
  .bk-win input[type="time"] { font-size: 15px; padding: 8px 4px 8px 8px; }
  .bk-win input[type="time"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; }
  .bk-day { padding: 10px; }
}
.bk-win .later, .bk-day .bk-add { min-height: 44px; }
.bk-to { color: var(--wf-b-ink-soft); }
.bk-closed { color: var(--wf-b-ink-soft); font-size: 15px; }
.bk-day .bk-add { justify-self: start; }
.bk-form .o-hint { margin: 12px 0 0; }
.bk-form h4.small-h { margin-top: 12px; }
#bk-feed-note { overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .bk-day { grid-template-columns: 9em 1fr auto; align-items: center; }
  .bk-closed { grid-column: 2; }
}
@media (max-width: 420px) { .order.bk .o-act2 { flex-wrap: nowrap; } .order.bk .o-act2 .open-btn { width: auto; flex: 1 1 0; } }

/* ---- bookings part 2 (Oct 12 2026) and the newsletter: their sub-tabs, a calm segmented strip ---- */
.bk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 16px 0 10px; background: var(--wf-b-well); border-radius: 14px; }
@media (min-width: 760px) { .bk-tabs { display: flex; } }
.bk-tab {
  flex: 1 0 auto; min-height: 44px; padding: 8px 12px; background: none; border: 0; border-radius: 10px;
  color: var(--wf-b-ink-soft); font-size: 15px; line-height: 1.2; cursor: pointer; text-align: center; overflow-wrap: anywhere;
}
.bk-tab[aria-selected="true"] { background: var(--wf-b-sheet); color: var(--wf-b-ink); font-weight: 500; box-shadow: 0 1px 3px rgb(38 42 94 / .14); }
.bk-tab:hover { color: var(--wf-b-ink); }
.bk-tab:focus-visible { outline-offset: -2px; }
.bk-panel { min-width: 0; }
.bk-monthbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 8px; }
.bk-month { margin: 0; font-family: var(--wf-font-display); font-weight: 400; font-size: 20px; text-align: center; }
.bk-mnav { padding: 6px 14px; font-size: 20px; }
.bk-mnav:disabled { opacity: .35; cursor: default; }
.bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-dow { text-align: center; font-size: 13px; letter-spacing: .04em; color: var(--wf-b-ink-soft); padding: 2px 0 4px; }
.bk-cd {
  position: relative; display: grid; align-content: start; justify-items: center; gap: 2px; min-width: 0; min-height: 54px; padding: 6px 2px 4px;
  border-radius: 10px; border: 1px solid var(--wf-b-rule); background: var(--wf-b-sheet); color: var(--wf-b-ink); cursor: pointer; font: inherit;
}
.bk-cd:hover { border-color: var(--wf-b-edge); }
.bk-cd[aria-pressed="true"] { border-color: var(--wf-b-link); box-shadow: inset 0 0 0 1px var(--wf-b-link); }
.bk-cd-n { font-size: 16px; line-height: 1.1; font-weight: 500; }
.bk-cd-w { font-size: 12.5px; line-height: 1.2; color: var(--wf-b-ink-soft); white-space: nowrap; overflow: hidden; max-width: 100%; }
.bk-cd-long { display: none; }
@media (min-width: 760px) { .bk-cd { min-height: 64px; } .bk-cd-long { display: inline; } .bk-cd-w { font-size: 13.5px; } }
.bk-cd-busy { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--wf-b-ink-soft); }
.bk-cd-past { opacity: .5; }
.bk-cd-usual_closed { background: transparent; border-style: dashed; }
.bk-cd-usual_closed .bk-cd-n { color: var(--wf-b-ink-soft); font-weight: 400; }
.bk-cd-closed { background: var(--wf-b-well); }
.bk-cd-closed .bk-cd-n { color: var(--wf-b-ink-soft); text-decoration: line-through; font-weight: 400; }
.bk-cd-closed .bk-cd-w { color: var(--wf-b-ink); }
.bk-cd-own .bk-cd-n { text-decoration: underline; text-decoration-color: var(--wf-b-link); text-underline-offset: 3px; }
.bk-cd-blank { min-height: 1px; }
.bk-cal-key { margin-top: 10px; }
.bk-dayinfo { margin: 14px 0 0; padding: 12px 16px; }
.bk-dayinfo .bk-day-h { margin: 0 0 6px; }
.bk-day-line { margin: 6px 0 0; display: grid; gap: 2px; font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.bk-day-books { margin: 4px 0 0; padding-left: 1.1em; font-size: 15.5px; line-height: 1.5; }
.bk-day-act { flex-wrap: wrap; }
.bk-daypick { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.bk-daypick legend { padding: 0; }
.bk-daypick .dc-check { margin-top: 0; }
@media (min-width: 560px) { .bk-daypick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .bk-daypick legend, .bk-daypick .orders-fine { grid-column: 1 / -1; } }
.bk-how { margin: 14px 0 0; }
.bk-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 15.5px; font-weight: 500; color: var(--wf-b-link); }
.bk-how-body p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--wf-b-ink-soft); }
.bk-how-body strong { color: var(--wf-b-ink); font-weight: 500; }
.bk-cal-err { color: var(--wf-b-ink); }
#f-bk-cal input, .bk-set select, .bk-set input, .bk-set textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.bk-set .dc-check input { width: 22px; max-width: 22px; }
.bk-set .field-label { margin-top: 12px; }
.bk .bk-ans .o-label { text-transform: none; letter-spacing: 0; }
/* new client intake (Oct 15 2026): the "Heads up" line first in a booking, calm, in the well color */
.bk .bk-heads { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--wf-b-accent); background: var(--wf-b-well); font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.bk .bk-heads strong { font-weight: 500; }
.bk-qintake .field-label { margin-top: 12px; }
.bk-qintake .orders-fine { margin: 2px 0 0; }
#bk-intake-wrap .small-h { margin-top: 22px; }
/* extras she switches on herself (Oct 16 2026, hub DEPLOY.md section 83): calm ledger rows, one Save for the block */
.bk-x { margin-top: 28px; }
.bk-x-list { list-style: none; margin: 12px 0 0; padding: 0; }
.bk-x-row { padding: 6px 0 16px; border-top: 1px solid var(--wf-b-rule); min-width: 0; }
.bk-x-row:last-child { border-bottom: 1px solid var(--wf-b-rule); }
.bk-x-row > .dc-check { margin-top: 4px; font-weight: 500; }
.bk-x-row > .orders-fine { margin-top: 2px; }
.bk-x-more { margin-top: 4px; padding-left: 32px; min-width: 0; }
.bk-x-need { color: var(--wf-b-ink); }
.bk-x-preview { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 559px) { .bk-x-more { padding-left: 0; } }

/* ============ your newsletter (Oct 12 2026) ============
   Four sub-tabs like Bookings. The preview is drawn the way the email itself looks. */
.nl-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nl-tabs .nl-tab { overflow-wrap: normal; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
@media (max-width: 359px) { .nl-tabs .nl-tab { font-size: 14px; padding-left: 3px; padding-right: 3px; } }
.nl-new { margin-top: 12px; }
.nl-row .nl-subj { font-family: var(--wf-font-display); font-size: 18.5px; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }
.nl-row .o-date { white-space: nowrap; }
.nl-row .nl-line { margin-top: 6px; }
.open-btn.nl-sure { border-color: var(--wf-b-due-edge); background: var(--wf-b-due-tint); color: var(--wf-b-due-ink); }
.nl-editor input[type="text"], .nl-set input[type="email"] { width: 100%; }
.nl-how { margin: 0 0 8px; font-size: 14.5px; }
textarea.nl-body { min-height: 300px; font-size: 16.5px; line-height: 1.55; }
.nl-saved:empty { display: none; }
.nl-send { margin-top: 8px; }
.nl-when { margin-top: 4px; }
.nl-when legend { padding: 0; }
.nl-radio { margin-right: 18px; }
.nl-confirm { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--wf-b-due-edge); background: var(--wf-b-due-tint); }
.nl-confirm p { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.nl-preview { margin-top: 18px; }
.nl-preview:focus { outline: none; }
.nl-preview:focus-visible { outline: 2px solid var(--wf-b-focus); outline-offset: 4px; border-radius: 12px; }
.nl-pv-title { margin-top: 0; }
.nl-pv-head { margin: 10px 0 0; }
.nl-pv-meta { margin: 2px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--wf-b-ink-soft); overflow-wrap: anywhere; }
.nl-pv-card { margin-top: 12px; padding: 22px 18px 16px; border-radius: 12px; background: #ffffff; color: #222222; border: 1px solid #e3e0da;
  font: 16.5px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; overflow-wrap: anywhere; }
.nl-pv-card a { color: #2f5d50; text-decoration: underline; }
.nl-pv-biz { margin: 0 0 16px; font-weight: 700; font-size: 18px; color: #2f5d50; }
.nl-pv-h { margin: 20px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 700; color: #222222; }
.nl-pv-p { margin: 0 0 14px; }
.nl-pv-ul { margin: 0 0 14px; padding-left: 22px; }
.nl-pv-ul li { margin: 0 0 4px; }
.nl-pv-empty { color: #6b6762; }
.nl-pv-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eeeae4; font-size: 13.5px; line-height: 1.5; color: #5d5a55; }
.nl-pv-foot p { margin: 0 0 6px; }
.nl-pv-leave { text-decoration: underline; }
.nl-people { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; background: var(--wf-b-sheet); border: 1px solid var(--wf-b-rule); border-radius: 16px; box-shadow: var(--wf-b-shadow); overflow: hidden; }
.nl-people:empty { display: none; }
.nl-person { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 12px 16px; border-top: 1px solid var(--wf-b-rule); font-size: 15.5px; line-height: 1.4; }
.nl-person:first-child { border-top: 0; }
.nl-p-email { min-width: 0; overflow-wrap: anywhere; }
.nl-p-when { color: var(--wf-b-ink-soft); font-size: 14.5px; }
.nl-pager { justify-content: space-between; }
.nl-csv { margin: 16px 0 0; }
.nl-csv .later { min-height: 44px; }
.nl-csv .later[aria-busy="true"] { color: var(--wf-b-ink-soft); cursor: wait; }
.nl-pager .open-btn:disabled { opacity: .45; cursor: default; }
.nl-set textarea { width: 100%; }
#in-nl-which { max-width: 20em; }

/* ---- your clients (Oct 15 2026): a read only ledger, one row per person; tap a row for their bookings ---- */
.bk-cl-q { width: 100%; max-width: 28em; min-height: 44px; }
.bk-cl-count { margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.bk-cls { list-style: none; margin: 10px 0 0; padding: 0; background: var(--wf-b-sheet); border: 1px solid var(--wf-b-rule); border-radius: 16px; box-shadow: var(--wf-b-shadow); overflow: hidden; }
.bk-cls:empty { display: none; }
.bk-cl { border-top: 1px solid var(--wf-b-rule); }
.bk-cl:first-child { border-top: 0; }
.bk-cl-btn {
  display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 12px 16px; background: none; border: 0; text-align: left;
  color: var(--wf-b-ink); font: inherit; font-size: 15.5px; line-height: 1.4; cursor: pointer;
}
.bk-cl-btn:hover { background: var(--wf-b-well); }
.bk-cl-btn:focus-visible { outline-offset: -3px; }
.bk-cl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.bk-cl-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bk-cl-reg { font-weight: 400; font-size: 14px; color: var(--wf-b-ink-soft); }
.bk-cl-n, .bk-cl-dates { font-variant-numeric: tabular-nums; color: var(--wf-b-ink-soft); font-size: 14.5px; }
.bk-cl-n { white-space: nowrap; }
.bk-cl-contact { min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; color: var(--wf-b-ink-soft); }
.bk-cl-d { padding: 0 16px 12px; }
.bk-cl-bks { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--wf-b-rule); }
.bk-cl-bk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 0; border-bottom: 1px solid var(--wf-b-rule); font-size: 14.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.bk-cl-bk:last-child { border-bottom: 0; }
.bk-cl-when { grid-column: 1; }
.bk-cl-svc { grid-column: 1; color: var(--wf-b-ink-soft); overflow-wrap: anywhere; }
.bk-cl-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; color: var(--wf-b-ink-soft); }
.bk-cl-bk.is-booked .bk-cl-st { color: var(--wf-b-ink); }
@media (min-width: 760px) {
  .bk-cl-bk { grid-template-columns: 15em minmax(0, 1fr) auto; }
  .bk-cl-svc { grid-column: 2; grid-row: 1; }
  .bk-cl-st { grid-column: 3; grid-row: 1; }
}
/* add by hand (Oct 16 2026): the short form, her note and Edit / Remove in an open line. Plain words, no pills;
   the only color is the "Yes, remove them" ask (.bk-sure, below) */
.bk-cl-add { margin-top: 12px; }
.bk-cl-form input, .bk-cl-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.bk-cl-form input { min-height: 44px; }
.bk-cl-form textarea { min-height: 88px; }
.bk-cl-lbl { margin: 4px 0 0; font-size: 14px; color: var(--wf-b-ink-soft); }
.bk-cl-note { margin: 2px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.bk-cl-act { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
@media (max-width: 420px) { .bk-cl-act .open-btn { flex: 1 1 auto; } }
.bk-cl-more { margin-top: 12px; }
.bk-cl-more .open-btn[aria-busy="true"], #b-bk-cl-csv[aria-busy="true"] { color: var(--wf-b-ink-soft); cursor: wait; }

/* ============ your visitors (Oct 15 2026): their own site's private counts ============
   Calm on purpose: one plain line, two numbers, a bar for each day in the quiet decoration lavender (no up-is-good
   green, no down-is-bad red), ledger rows for pages, sites and devices, tabular numbers throughout. */
.vs-lede { margin: 6px 0 14px; font-size: 17.5px; line-height: 1.5; max-width: 36em; }
.vs-glance dd { font-variant-numeric: tabular-nums; }
.vs-days { margin: 20px 0 0; }
.vs-cap { font-size: 14.5px; color: var(--wf-b-ink-soft); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.vs-chart { height: 96px; }
.vs-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vs-bar { fill: var(--wf-b-leaf); }
.vs-bar:hover { fill: var(--wf-b-ink-soft); }
.vs-base { stroke: var(--wf-b-rule); stroke-width: 1; }
.vs-axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 13.5px; color: var(--wf-b-ink-soft); font-variant-numeric: tabular-nums; }
.vs-h { margin-top: 28px; margin-bottom: 10px; font-size: 18px; }
.vs-list { box-shadow: none; }
.vs-list > li { padding: 11px 16px; }
.vs-list .what b { font-weight: 400; }
.vs-n { flex: none; font-variant-numeric: tabular-nums; color: var(--wf-b-ink-soft); font-size: 15px; white-space: nowrap; }
.vs-none { margin: 6px 0 0; color: var(--wf-b-ink-soft); font-size: 15px; }
.vs-fine { margin: 22px 0 0; color: var(--wf-b-ink-soft); font-size: 14.5px; line-height: 1.5; max-width: 44em; }
@media print { .vs-bar { fill: #888; } }

/* paid add-ons in Bookings, Services (Oct 15 2026): ledger rows like the services; the buttons sit together, and
   "Yes, remove it" takes the warning tint (the only color, and it means something) */
.dc .o-act.bk-addon-act { justify-content: flex-start; }
.open-btn.bk-sure { border-color: var(--wf-b-due-edge); background: var(--wf-b-due-tint); color: var(--wf-b-due-ink); }
.order .bk-addons-total { color: var(--wf-b-ink); }
/* ============ your receipts (Oct 15 2026): a calm receipts box =====   Phone first (390 px): one column, 44 px taps, every amount in tabular numbers. Ledger rows for the month, no pills.
   Color only with meaning: gold words and a gold edge for "looks like one saved twice" (it needs a look); nothing else
   is colored. */
.rc-fine { margin: 10px 0 0; color: var(--wf-b-ink-soft); font-size: 14.5px; line-height: 1.5; max-width: 44em; }
.rc-top { margin: 4px 0 0; }
.rc-lede { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; max-width: 36em; }
.rc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.rc-pick .btn, .rc-pick .open-btn { min-height: 44px; }
@media (max-width: 420px) { .rc-pick > * { flex: 1 1 100%; justify-content: center; } }
.rc-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.rc-form { margin-top: 6px; }
.rc-form .small-h { margin-top: 10px; }
.rc-status { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--wf-b-ink); max-width: 36em; }
.rc-status:empty { display: none; }
.rc-pic { margin: 14px 0 0; }
.rc-pic img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; border: 1px solid var(--wf-b-rule); border-radius: 10px; background: var(--wf-b-well); }
.rc-amt, #in-rc-date { font-variant-numeric: tabular-nums; }
#in-rc-date, .rc-amt { max-width: 14em; }
#in-rc-cat, #in-rc-month, #in-rc-exmonth { max-width: 20em; }
#in-rc-note { min-height: 72px; }
.rc-form .dc-btns > button { min-height: 44px; }
.rc-same { margin: 16px 0 0; padding: 12px 14px; background: var(--wf-b-due-tint); border-left: 3px solid var(--wf-b-due-edge); border-radius: 8px; }
.rc-same p { margin: 0; color: var(--wf-b-due-ink); font-size: 15.5px; line-height: 1.5; }
.rc-same .dc-btns { margin-top: 10px; }
.rc-total { margin: 14px 0 10px; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.rc-same-note { margin: 0 0 10px; color: var(--wf-b-due-ink); font-size: 15px; line-height: 1.5; max-width: 40em; }
.rc-list { box-shadow: none; }
.rc-list > li.rc-li { padding: 0; }
.rc-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 11px 16px; background: none; border: 0;
  color: var(--wf-b-ink); font: inherit; text-align: left; cursor: pointer;
}
.rc-row:hover .what b { text-decoration: underline; text-underline-offset: 3px; }
.rc-row:focus-visible { outline-offset: -3px; }
.rc-row[aria-expanded="true"] { background: var(--wf-b-well); }
.rc-d { flex: none; width: 4.2em; color: var(--wf-b-ink-soft); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-row .what b { font-weight: 400; }
.rc-row .what small { overflow-wrap: anywhere; }
.rc-row .what small.rc-twice { color: var(--wf-b-due-ink); font-weight: 500; }
.rc-a { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 16px; }
.rc-li:has(.rc-twice) { box-shadow: inset 3px 0 0 var(--wf-b-due-edge); }
.rc-list > li.rc-edit-li { display: block; padding: 4px 16px 18px; background: var(--wf-b-well); border-top: 0; }
.rc-edit-li .rc-form { margin-top: 0; }
@media (max-width: 380px) { .rc-row { padding: 11px 12px; gap: 10px; } .rc-d { width: 3.8em; } }
@media print { .rc-pick, .rc-tabs, .rc-form { display: none; } }
=======
/* ============ your business papers (Oct 15 2026): insurance, licenses, permits, certifications ============
   Ledger rows like the rest of the back end. Color only with meaning: the gold "Renews in 3 weeks" line once 30 days
   or fewer are left, red only once one has ended; everything else in the usual inks. The number and the contact are
   selectable text (one tap selects the whole of it, for copying into a form or a phone). */
.pp-lede { margin: 6px 0 14px; font-size: 17px; line-height: 1.5; max-width: 38em; }
.pp-list { box-shadow: none; }
.pp-list > li.pp-item { align-items: flex-start; flex-wrap: wrap; padding: 16px 18px; }
.pp-item .what { flex: 1 1 18em; }
.pp-item .acts { padding-top: 2px; }
.pp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 12px 0 0; font-size: 15px; }
.pp-facts div { display: contents; }
.pp-facts dt { color: var(--wf-b-ink-soft); }
.pp-facts dd { margin: 0; color: var(--wf-b-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-sel { -webkit-user-select: all; user-select: all; }
.pp-notes { margin: 12px 0 0; padding: 10px 12px; border-left: 2px solid var(--wf-b-rule); color: var(--wf-b-ink); font-size: 15px; line-height: 1.5; white-space: pre-line; max-width: 40em; }
.pp-due { margin: 10px 0 0; font-size: 14.5px; font-weight: 500; color: var(--wf-b-due-ink); }
.pp-due.over { color: var(--wf-b-trouble); }
.pp-fine { margin: 18px 0 0; color: var(--wf-b-ink-soft); font-size: 14.5px; line-height: 1.5; max-width: 44em; }
@media (max-width: 520px) {
  .pp-facts { grid-template-columns: 1fr; gap: 0; }
  .pp-facts dd { margin-bottom: 6px; }
}

/* ============ read only view: a Studio preview (Oct 19 2026, hub DEPLOY.md section 90) ============
   Only with portal.js's html.wf-preview: a calm line at the top, no sign-out, and every control that would change
   something quiet and plainly off (it keeps its place, so the page looks the same as the client's). */
.pv-bar {
  margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--wf-b-rule); border-radius: var(--wf-r-sheet);
  background: var(--wf-b-sheet); color: var(--wf-b-ink-soft); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere;
}
html.wf-preview #b-signout-top, html.wf-preview #foot-out, html.wf-preview #b-signout { display: none !important; }
html.wf-preview .ro-off { opacity: .55; cursor: not-allowed; }
html.wf-preview label:has(> .ro-off) { cursor: not-allowed; }

/* ============ brand accent (Oct 16 2026, hub DEPLOY.md section 80) ============
   Only when Taya has set a color for this client: portal.js applyAccent puts data-wf-brand on <html> and
   --wf-b-brand (their color, or a darker shade of the same hue that reads at 4.5:1 on the paper and the ground).
   It touches only the small accents below. NOT themed on purpose: gold (the main button, "needs you" counts and
   tints), teal and red (done, trouble, due and paid), every text color (body, links' words, labels), fonts,
   layout, the bar itself and its gold focus rings, the Web Faery mark in the footer, and the door page (my/).
   With no data-wf-brand nothing here applies, so the look is exactly Web Faery's own. */
:root[data-wf-brand] { --wf-b-focus: var(--wf-b-brand); }
:root[data-wf-brand] h1 em, :root[data-wf-brand] h2 em, :root[data-wf-brand] h3 em { color: var(--wf-b-brand); }
:root[data-wf-brand] main a:not(.btn) { text-decoration-color: var(--wf-b-brand); }
:root[data-wf-brand] .bk .bk-heads { border-left-color: var(--wf-b-brand); }
:root[data-wf-brand] .thing .ico, :root[data-wf-brand] .more-in li a svg { color: var(--wf-b-brand); }
/* the current tab's line sits on the night bar: their color only when it shows there at 3:1 (data-wf-brand-bar),
   else the gold line stays */
:root[data-wf-brand-bar] .tabs a[aria-current="page"]::after,
:root[data-wf-brand-bar] .dock [aria-current="page"]::before { background: var(--wf-b-brand-bar); box-shadow: none; }