/* THE PHONE (2 October 2026).

   Everything the /phone screens wear, and nothing else: every class here starts "px-", and no rule
   reaches outside .px-app. The desktop stylesheets style elements by page ("ax-page button" among
   them), so the phone keeps clear of their classes rather than fighting them.

   SITE (3 October 2026). Adam Deane: "You design without my colours styles anything, you do what you
   think would be perfect if I employed you to design my app to work." Designed for where it is used -
   outside, in full sun, gloves on, one bar of signal:

   - Hi-vis yellow for the one thing to press, with black on it: the most legible pair there is (16:1),
     the colour of every vest on site, and never used for anything else - so the eye goes straight to it.
   - Charcoal for the frame (the top of each screen, the tab bar, the day's button bar) and near-black
     text on white for everything read: high contrast reads in sunlight; tints and pale greys do not.
   - The phone's own typeface (San Francisco on an iPhone): the sharpest it can draw, nothing to download.
   - Big targets (48px and up), 17px body text like iOS itself, 16px in every field so iOS does not zoom.
   - Colour only where it means something: green working, blue travelling, amber on a break, red wrong.

   The orange of the first version (2 October) is in the backup beside the README in
   C:\ArchEx\Backups\phone-before-redesign-20261003-1400. */

.px-app {
    --px-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --px-ground: #EEEEEA;
    --px-card: #FFFFFF;
    --px-ink: #111315;
    --px-ink-2: #33383D;
    --px-muted: #5B6168;
    --px-line: #E4E4DF;
    --px-line-strong: #CDCDC7;
    --px-night: #16191C;
    --px-night-2: #262B30;
    --px-night-3: #3A4047;
    --px-night-text: #B8BEC4;
    --px-fill: #FFCC00;
    --px-fill-pressed: #EDBA00;
    --px-fill-ink: #111315;
    --px-link: #111315;
    --px-deep: #111315;
    --px-soft: #FFF5CC;
    --px-tint: #F2F2EE;
    --px-good: #1A7F4B;
    --px-good-soft: #E1F2E8;
    --px-good-ink: #125C35;
    --px-bad: #D0281E;
    --px-bad-soft: #FDE8E6;
    --px-bad-ink: #9E1C14;
    --px-warn: #C27400;
    --px-warn-soft: #FFF1D4;
    --px-warn-ink: #7A4700;
    --px-move: #2563EB;
    --px-off: #DCDCD6;
    --px-off-ink: #4D5257;
    --px-tabs-h: 64px;

    min-height: 100vh;
    min-height: 100dvh;
    background: var(--px-ground);
    color: var(--px-ink);
    font-family: var(--px-font);
    font-size: 17px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-variant-numeric: tabular-nums;
}

.px-app h1,
.px-app h2,
.px-app h3 {
    font-family: var(--px-font);
    letter-spacing: -.01em;
    color: var(--px-ink);
    margin: 0;
}

/* Every font the phone sets is the phone's own; the desktop's Lato is not downloaded for it. */
.px-app button,
.px-app input,
.px-app textarea,
.px-app select { font-family: var(--px-font); }

.px-app p { margin: 0; }

/* ---- page frame ---------------------------------------------------------------------------- */

.px-main {
    max-width: 560px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 20px calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 96px);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* The photo screen has its Save bar where the tabs would be. */
.px-main-bare {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
}

.px-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.px-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.px-title-job { font-size: 28px; }

.px-sub {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--px-muted);
}

.px-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--px-fill);
    color: var(--px-fill-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
}

.px-jobhead {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.px-back {
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--px-ink);
}

.px-back svg,
.px-chev,
.px-tab svg,
.px-tile svg,
.px-entry-icon svg,
.px-btn svg,
.px-ask-title svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-back svg { width: 26px; height: 26px; stroke-width: 2.2; }

.px-jobhead > div { padding-top: 6px; min-width: 0; }

/* A salvage's registered places, each with its VAHR number, in one row to swipe (3 October 2026). */
.px-vahr {
    display: flex;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0 0 2px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.px-vahr::-webkit-scrollbar { display: none; }

.px-vahr li {
    flex: none;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--px-tint);
    color: var(--px-ink-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.px-vahr li b { font-weight: 800; color: var(--px-ink); }

.px-loading,
.px-finding {
    font-size: 15px;
    color: var(--px-muted);
}

.px-finding {
    display: flex;
    align-items: center;
    gap: 8px;
}

.px-finding::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #2563AF;
    animation: px-pulse 1.2s ease-in-out infinite;
}

@keyframes px-pulse {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .px-finding::before { animation: none; }
}

/* ---- cards and text ------------------------------------------------------------------------ */

.px-card {
    background: var(--px-card);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(17, 19, 21, .06), 0 0 0 1px rgba(17, 19, 21, .04);
}

.px-hero { padding: 20px; }
.px-hero h2 { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.px-hero .px-btn { margin-top: 12px; }

/* Two classes deep, because an eyebrow is sometimes a heading and ".px-app h2" would recolour it. */
.px-app .px-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--px-muted);
}

.px-app .px-eyebrow-muted { color: var(--px-muted); }

.px-h2 { font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }

.px-meta {
    font-size: 15px;
    color: var(--px-muted);
}

.px-meta.is-good { color: var(--px-good-ink); font-weight: 700; }
.px-meta.is-warn { color: var(--px-warn-ink); font-weight: 700; }

.px-strong { font-size: 17px; font-weight: 700; }

.px-note {
    font-size: 14px;
    line-height: 1.45;
    color: var(--px-muted);
}

.px-hint {
    font-size: 13px;
    color: var(--px-muted);
}

/* The signature a phone reply goes with, opened to check (7 October 2026, #289). The signature is a 560-wide table
   for mail programs; here it is fitted to the phone, on white, as the recipient sees it. */
.px-sig { border: 1px solid var(--px-line, #E3DCD1); border-radius: 12px; background: #FFFFFF; }
.px-sig summary { padding: 10px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.px-sig-body { padding: 4px 12px 12px; overflow-x: auto; }
.px-sig-body table { width: 100% !important; max-width: 100%; }
.px-sig-body img { max-width: 100%; height: auto; }

.px-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.px-section > h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-top: 6px; }

.px-message {
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--px-good-soft);
    color: var(--px-good-ink);
    font-size: 15px;
    font-weight: 700;
}

.px-message.is-error {
    background: var(--px-bad-soft);
    color: var(--px-bad-ink);
}

.px-quiet-link {
    align-self: center;
    min-height: 48px;
    border: 0;
    background: none;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--px-muted);
    text-decoration: none;
    cursor: pointer;
}

/* A link inside a sentence stays in the sentence. */
.px-meta .px-quiet-link {
    display: inline;
    min-height: 0;
    padding: 0;
    color: var(--px-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.px-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- buttons ------------------------------------------------------------------------------- */

/* The thing to press: hi-vis, black on it, a firm edge along the bottom so it reads as a key. */
.px-btn {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 16px;
    background: var(--px-fill);
    color: var(--px-fill-ink);
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--px-font);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14);
    transition: transform .08s ease, background-color .08s ease;
}

.px-btn:active { background: var(--px-fill-pressed); transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14); }
.px-btn svg { width: 26px; height: 26px; }

.px-btn:disabled {
    background: var(--px-off);
    color: var(--px-off-ink);
    box-shadow: none;
    transform: none;
    cursor: default;
}

.px-btn-quiet {
    min-height: 52px;
    background: var(--px-card);
    color: var(--px-ink);
    border: 1.5px solid var(--px-line-strong);
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
}

.px-btn-quiet:active { background: var(--px-tint); box-shadow: none; }

.px-btn-quiet:disabled {
    background: var(--px-card);
    color: #8C918E;
}

/* The second choice on a charcoal bar: there, but not shouting. */
.px-btn-night {
    background: var(--px-night-3);
    color: #FFFFFF;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}

.px-btn-night:active { background: #4A515A; }
.px-btn-night:disabled { background: var(--px-night-2); color: #8D949B; }

@media (prefers-reduced-motion: reduce) {
    .px-btn { transition: none; }
    .px-btn:active { transform: none; }
}

.px-btn-small {
    width: auto;
    min-height: 48px;
    font-size: 16px;
    padding: 0 16px;
    flex: none;
}

.px-btn-big {
    min-height: 72px;
    font-size: 20px;
}

.px-link-btn {
    min-height: 48px;
    border: 0;
    background: none;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--px-font);
    font-size: 16px;
    font-weight: 700;
    color: var(--px-link);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--px-fill);
    text-underline-offset: 5px;
    cursor: pointer;
}

.px-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* ---- the bottom tabs ----------------------------------------------------------------------- */

/* Charcoal, like the top of each screen: the frame, with the work on white inside it (3 October 2026). */
.px-tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    background: var(--px-night);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: grid;
    /* As many columns as there are tabs - four since Messages joined them (4 October 2026). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .06);
}

.px-tab {
    position: relative;
    min-height: var(--px-tabs-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--px-night-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.px-tab svg { width: 24px; height: 24px; }

/* The icon sits in its own holder so the current tab can show a soft tint behind it, and the alert
   count can sit on the holder's corner instead of on top of the bell (2 October 2026). */
.px-tab-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 30px;
    border-radius: 999px;
}

.px-tab.is-active {
    color: #FFFFFF;
    font-weight: 800;
}

.px-tab.is-active .px-tab-icon {
    background: var(--px-fill);
    color: var(--px-fill-ink);
}

/* The count: red, as every phone shows a count, clear of the icon's edge. */
.px-badge {
    position: absolute;
    top: -6px;
    right: 4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--px-bad);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--px-night);
}

/* The feedback button sits above the tabs on the phone, not on them. Doubled class to outrank
   the widget's own scoped rule, which loads after this file. */
.px-app .feedback-fab.feedback-fab {
    right: 14px;
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 14px);
    min-height: 44px;
    padding: 0 14px;
    /* White with a black pencil (3 October 2026): the orange was the old palette's, and beside the
       hi-vis buttons it read as one more thing to press first. */
    background: #FFFFFF;
    color: var(--px-ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .06);
}

.px-app:has(.px-main-bare) .feedback-fab.feedback-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ---- Today and My week --------------------------------------------------------------------- */

.px-post {
    background: var(--px-card);
    border-radius: 16px;
    padding: 14px 16px;
    border-left: 4px solid var(--px-fill);
}

.px-post-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.px-post-meta {
    margin-top: 4px;
    font-size: 14px;
    color: var(--px-muted);
}

.px-row {
    background: var(--px-card);
    border-radius: 16px;
    padding: 14px 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--px-ink);
    text-decoration: none;
}

.px-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.px-row-small { font-size: 14px; color: var(--px-muted); }
.px-row-strong { font-size: 17px; font-weight: 700; }
.px-chev { flex: none; width: 20px; height: 20px; color: #9A9FA5; }

.px-day { gap: 8px; }

.px-section > h2.px-day-head {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--px-muted);
}

.px-job {
    background: var(--px-card);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--px-ink);
    text-decoration: none;
}

.px-job.is-today { border-color: var(--px-ink); }

.px-job-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.px-job-name { font-size: 18px; font-weight: 800; }
.px-job-line { font-size: 15px; color: var(--px-muted); }

.px-pill-now {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    color: #FFFFFF;
    background: var(--px-good);
    border-radius: 10px;
    padding: 3px 9px;
}

/* ---- the job ------------------------------------------------------------------------------- */

.px-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.px-chip {
    background: var(--px-tint);
    color: var(--px-ink);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.px-chip.is-good {
    background: var(--px-good-soft);
    color: var(--px-good-ink);
}

.px-chip.is-booked {
    background: var(--px-soft);
    color: var(--px-ink);
    box-shadow: inset 0 0 0 1.5px var(--px-fill);
}

.px-chip.is-warn {
    background: var(--px-warn-soft);
    color: var(--px-warn-ink);
}

.px-chip.is-link {
    color: var(--px-link);
    text-decoration: none;
    border: 1px solid var(--px-line-strong);
}

.px-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.px-stage-text {
    font-size: 16px;
    line-height: 1.45;
}

.px-warn { background: var(--px-warn-soft); gap: 10px; }

.px-toolbox {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.px-embedded { margin-top: -6px; }

.px-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.px-tile {
    min-height: 116px;
    border: 0;
    border-radius: 16px;
    background: var(--px-card);
    color: var(--px-ink);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    text-decoration: none;
    font-family: var(--px-font);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.px-tile svg {
    width: 32px;
    height: 32px;
    color: var(--px-link);
}

.px-tile-label {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}

.px-tile-sub {
    margin-top: -4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--px-bad-ink);
}

.px-tile.is-primary {
    background: var(--px-fill);
    color: var(--px-fill-ink);
}

.px-tile.is-primary svg { color: var(--px-fill-ink); }
.px-tile:active { filter: brightness(.96); }

.px-label {
    font-size: 15px;
    font-weight: 700;
}

.px-input {
    width: 100%;
    min-height: 50px;
    border: 1.5px solid var(--px-line-strong);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--px-ink);
    padding: 0 14px;
    font-family: var(--px-font);
    font-size: 16px;
}

.px-input:focus {
    outline: none;
    border-color: var(--px-ink);
    box-shadow: 0 0 0 3px rgba(255, 204, 0, .55);
}

.px-textarea {
    padding: 12px 14px;
    line-height: 1.45;
    resize: vertical;
}

.px-composer { gap: 10px; }

.px-ask { gap: 10px; }

.px-ask-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.px-ask-title svg { width: 20px; height: 20px; color: var(--px-link); }

.px-ask-form {
    display: flex;
    gap: 8px;
}

.px-ask-form .px-input { flex: 1; min-width: 0; }

.px-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.px-suggest-chip {
    min-height: 40px;
    border: 1px solid var(--px-line-strong);
    border-radius: 20px;
    background: #FFFFFF;
    color: var(--px-ink);
    padding: 0 14px;
    font-family: var(--px-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.px-answer {
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--px-ink-2);
}

.px-last { gap: 4px; }

.px-entry {
    background: var(--px-card);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.px-entry-icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--px-tint);
    color: var(--px-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.px-entry-icon svg { width: 20px; height: 20px; }

.px-entry-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.px-entry-main { font-size: 15px; font-weight: 700; line-height: 1.35; }
.px-entry-sub { font-size: 13px; color: var(--px-muted); }

.px-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
}

.px-more a {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--px-ink-2);
    text-decoration: underline;
    text-decoration-color: var(--px-line-strong);
    text-underline-offset: 4px;
}

/* ---- the photo ----------------------------------------------------------------------------- */

/* Off screen rather than display:none - a label only opens a file input the browser can still see. */
.px-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.px-pick {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.px-photo-stage {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #2B2F2C;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.px-photo-stage img {
    display: block;
    width: 100%;
    max-height: 56vh;
    object-fit: contain;
}

.px-photo-none {
    color: #B9BDB9;
    font-size: 15px;
    padding: 40px 16px;
}

.px-photo-facts {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.px-photo-facts span {
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 700;
}

.px-photo-actions {
    display: flex;
    justify-content: space-between;
    margin-top: -8px;
}

.px-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.px-choice {
    min-height: 44px;
    border: 1.5px solid var(--px-line-strong);
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--px-ink);
    padding: 0 14px;
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* Chosen: hi-vis with a black edge - as plain in the sun as it is in the office. */
.px-choice.is-on {
    border: 2px solid var(--px-ink);
    background: var(--px-fill);
    color: var(--px-fill-ink);
    font-weight: 800;
}

.px-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.px-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 14px);
    background: var(--px-ground);
    border-top: 1px solid var(--px-line);
}

.px-savebar .px-btn {
    max-width: 520px;
    margin: 0 auto;
}

/* ---- the toolbox talk ---------------------------------------------------------------------- */

.px-step { gap: 10px; }

.px-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 900;
}

.px-step-no {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: var(--px-ink);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.px-step-no:empty { display: none; }

.px-step.is-done { box-shadow: inset 0 0 0 2px var(--px-good-soft), 0 1px 3px rgba(0, 0, 0, .07); }
.px-step.is-done .px-step-no { background: var(--px-good); }

/* Not hidden: the person running the toolbox should see what comes next, and why it is waiting. */
.px-step.is-locked { opacity: .62; }

/* ---- the toolbox, one step at a time (4 October 2026) ----------------------------------------
   Adam Deane: "Also this looks poor, no clear and easy to use". A card at the top says where it is
   up to and what stops anyone working; each step is a heading that folds to one line when it is not
   the one being done. A folded step is never faded - folded is not locked. */
.px-tb-progress { gap: 10px; }

.px-tb-steps {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.px-tb-chip {
    width: 100%;
    min-height: 58px;
    border: 1px solid var(--px-line-strong);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--px-ink);
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 2px;
    cursor: pointer;
}

.px-tb-chip.is-open { border-color: var(--px-ink); box-shadow: inset 0 0 0 1px var(--px-ink); background: var(--px-soft); }
.px-tb-chip.is-done { border-color: #BFDCC9; background: #F3F9F5; }

.px-tb-dot {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--px-ink);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.px-tb-chip.is-done .px-tb-dot { background: var(--px-good); }
.px-tb-chip-name { font-size: 12px; font-weight: 800; letter-spacing: .01em; }

.px-tb-blocker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--px-bad-soft);
    border: 1px solid #F0C9C2;
}

.px-tb-blocker-text { font-size: 15px; line-height: 1.4; color: var(--px-bad-ink); }
.px-tb-blocker-text strong { color: var(--px-ink); }

/* The heading of a step is the button that opens and folds it, the whole width of the card. */
.px-step-heading { margin: 0; }

.px-step-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--px-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}

.px-step-head-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-step-name { font-size: 18px; font-weight: 900; }
.px-step-sum { font-size: 14px; font-weight: 600; color: var(--px-muted); line-height: 1.35; }
.px-step.is-done .px-step-sum { color: var(--px-good-ink); }

.px-step-chevron {
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--px-ink-2);
    border-bottom: 2.5px solid var(--px-ink-2);
    transform: rotate(45deg);
    margin: 0 6px 4px 0;
}

.px-step.is-open .px-step-chevron { transform: rotate(-135deg); margin: 4px 6px 0 0; }

/* Folded is a different state from locked: a folded step is a line to tap, at full strength. */
.px-step.is-folded { opacity: 1; padding-top: 14px; padding-bottom: 14px; }

.px-tb-next { margin-top: 8px; }

/* The bar at the foot of the toolbox (4 October 2026): what is left in this step, Back, and the one button
   that moves on. It stays under the thumb while the step scrolls. */
.px-tb-bar {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding: 14px 0 calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(238, 238, 234, 0), var(--px-ground) 16px);
}

.px-tb-todo {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--px-warn-ink);
    background: var(--px-warn-soft);
    border-radius: 12px;
    padding: 9px 12px;
}

/* The feedback pencil sits beside the "Still to do" line, just above the buttons - never on top of either. */
.px-app:has(.px-tb-bar) .feedback-fab.feedback-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
}

.px-tb-bar .px-tb-todo { margin-right: 54px; }

/* The same line, green, once the step is answered: the bar keeps its height, so nothing jumps under the
   thumb as the last answer goes in. */
.px-tb-todo.is-done {
    color: var(--px-good-ink);
    background: var(--px-good-soft);
}

/* Back is as wide as its word; the button that moves on takes the rest. (.px-btn is 100% wide on its own.) */
.px-tb-bar-buttons { display: flex; gap: 10px; }
.px-tb-bar-buttons .px-btn { width: auto; flex: 1 1 0; min-width: 0; min-height: 54px; }
.px-tb-bar-buttons .px-btn-quiet { flex: 0 0 auto; padding-left: 24px; padding-right: 24px; }

/* A file's own name under the button that opens it: long, and often without a space to break at. */
.px-file-name { margin-top: 6px; text-align: center; overflow-wrap: anywhere; }

/* Who was marked "Not here today", each with a way back. */
.px-tb-nothere {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--px-line);
}

.px-tb-nothere-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0;
    min-height: 44px;
    font-size: 15px;
    color: var(--px-muted);
}

/* The weather, all of it, a sentence to a line. */
.px-tb-weather {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--px-tint);
    font-size: 16px;
    line-height: 1.4;
    color: var(--px-ink);
}

.px-tb-weather p { margin: 0; }

/* Issuing the job's SWMS from the toolbox: a white panel inside the red "no SWMS" card. */
.px-tb-issue {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--px-line-strong);
}
.px-tb-again { align-self: flex-start; margin: 2px 0 6px; }

.is-good-card { background: var(--px-good-soft); }

.px-check {
    width: 100%;
    border: 1px solid var(--px-line-strong);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--px-ink);
    padding: 12px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    text-align: left;
    font-family: var(--px-font);
    cursor: pointer;
}

.px-check.is-on {
    border: 2px solid var(--px-good);
    background: #F3F9F5;
}

.px-check-box {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid var(--px-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #FFFFFF;
}

.px-check.is-on .px-check-box {
    border-color: var(--px-good);
    background: var(--px-good);
}

.px-check-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.px-check-title { font-size: 15px; font-weight: 900; line-height: 1.3; }
.px-check-line { font-size: 14px; line-height: 1.4; color: var(--px-ink-2); }

.px-risk {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    vertical-align: 1px;
}

.px-risk.is-low { background: #E3EFE7; color: #1F5134; }
.px-risk.is-medium { background: #FFF0CC; color: #6B4A00; }
.px-risk.is-high { background: #FBE0DB; color: #8A2318; }

.px-swms-row {
    padding: 10px 0;
    border-top: 1px solid var(--px-line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Spaced with margins, not flex: Safari will not lay out a <details> as a flex container. */
.px-add {
    border-top: 1px solid var(--px-line);
    padding-top: 6px;
}

.px-add > :not(summary) { margin-top: 10px; }

.px-add > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 900;
    color: var(--px-link);
    cursor: pointer;
    list-style: none;
}

.px-add > summary::-webkit-details-marker { display: none; }
.px-add > summary::before { content: "+"; margin-right: 8px; font-size: 20px; }
.px-add[open] > summary::before { content: "–"; }

.px-add-new { margin-top: 6px; }

.px-row-button {
    width: 100%;
    border: 1px solid var(--px-line);
    text-align: left;
    font-family: var(--px-font);
    cursor: pointer;
}

.px-people {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.px-person {
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--px-line);
    background: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.px-person.is-done { border-color: #BFDCC9; background: #F3F9F5; }
.px-person.is-visitor { background: #F7F5F1; }
.px-person.is-blocked { border-color: #F0C9C2; }

.px-person-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 200px;
}

.px-person-name { font-size: 16px; font-weight: 900; }
.px-person-role { font-size: 13px; color: var(--px-muted); }
.px-person-state { font-size: 14px; font-weight: 700; color: var(--px-ink-2); }
.px-person.is-done .px-person-state { color: var(--px-good-ink); }
.px-person.is-blocked .px-person-state { color: var(--px-bad-ink); }

.px-person-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

.px-link-muted { color: var(--px-muted); font-weight: 700; }

.px-site-photo {
    display: block;
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    border-radius: 12px;
}

/* The phone handed to someone to sign: everything else is covered, so the only thing to do is read and sign. */
.px-sign {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--px-ground);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.px-sign-inner {
    max-width: 560px;
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.px-sign-read {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--px-ink-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.px-sign-statement {
    border-left: 4px solid var(--px-fill);
    padding: 4px 0 4px 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.px-sign-pad {
    position: relative;
    height: 200px;
    border: 2px dashed var(--px-line-strong);
    border-radius: 14px;
    background: #FFFFFF;
}

.px-sign-pad canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    border-radius: 12px;
}

.px-sign-line {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 40px;
    border-top: 1px solid var(--px-line-strong);
    padding-top: 4px;
    font-size: 12px;
    color: var(--px-muted);
    pointer-events: none;
}

/* ---- alerts -------------------------------------------------------------------------------- */

.px-alert {
    background: var(--px-card);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
    color: var(--px-ink);
    text-decoration: none;
}

.px-badge-ask { gap: 8px; }
.px-badge-ask .px-btn.is-on { border-color: var(--px-good); color: var(--px-good-ink); }
.px-badge-ask .px-btn.is-refused { opacity: .6; }

/* An alert is a button now - a tap clears it and opens it - so it sheds the button look. */
.px-alert.is-button {
    width: 100%;
    border: 0;
    text-align: left;
    font-family: var(--px-font);
    cursor: pointer;
}

.px-alert.is-button:active { filter: brightness(.97); }

.px-alert-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-top: 6px;
    background: var(--px-line-strong);
}

.px-alert.is-high .px-alert-dot { background: var(--px-bad); }
.px-alert.is-medium .px-alert-dot { background: var(--px-warn); }

.px-alert-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.px-alert-title { font-size: 16px; font-weight: 900; }
.px-alert-detail { font-size: 15px; line-height: 1.4; color: var(--px-ink-2); }
.px-alert-when { font-size: 13px; color: var(--px-muted); }

/* Seen before (7 October 2026): still listed while it needs doing, said quietly; what is new keeps the strong title. */
.px-alert.is-seen .px-alert-title { font-weight: 700; }
.px-alert.is-seen .px-alert-dot { opacity: .45; }
.px-alert-new { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--px-accent, #F26C21); color: #FFFFFF; font-size: 11px; font-weight: 800; vertical-align: 2px; }

/* ---- entries that open (2 October 2026) ---------------------------------------------------- */

/* Adam: the entries were "just sort of sitting there loosely". Each is now a button with a chevron,
   and a photo entry shows the photo itself. */
.px-entry.is-open {
    width: 100%;
    border: 0;
    text-align: left;
    font-family: var(--px-font);
    color: var(--px-ink);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.px-entry.is-open:active { filter: brightness(.97); }
.px-entry.is-open .px-entry-text { flex: 1; }

.px-entry-thumb {
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #E9E3DA;
}

.px-entry-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.px-entry-count {
    position: absolute;
    right: 3px;
    bottom: 3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .66);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- sheets: an entry opened, and the job brief -------------------------------------------- */

.px-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 20, 20, .42);
}

.px-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    max-width: 560px;
    max-height: 90vh;
    max-height: 90dvh;
    margin: 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: var(--px-ground);
    /* Its own ink: a sheet opened from inside the charcoal band would otherwise inherit white text. */
    color: var(--px-ink);
    border-radius: 20px 20px 0 0;
    padding: 18px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
}

/* A sheet is a column that scrolls; without this its children shrink to fit it instead, and the
   brief's map - which has no content of its own to hold it open - was squeezed to nothing. */
.px-sheet > * { flex-shrink: 0; }

/* Nothing scrolls behind a sheet. */
html:has(.px-sheet), html:has(.px-viewer) { overflow: hidden; }

.px-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.px-close {
    flex: none;
    width: 44px;
    height: 44px;
    margin: -6px -8px 0 0;
    border: 0;
    border-radius: 22px;
    background: #E2E2DD;
    color: var(--px-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.px-close svg,
.px-say svg,
.px-viewer-btn svg,
.px-viewer-step svg,
.px-mapc-btn svg,
.px-mapc-locate svg,
.px-mapc-x svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-close svg { width: 22px; height: 22px; }

.px-sheet-text {
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--px-ink);
}

.px-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.px-photo-cell {
    border: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #E9E3DA;
    cursor: pointer;
}

.px-photo-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.px-photo-grid.is-one { grid-template-columns: minmax(0, 1fr); }
.px-photo-grid.is-one .px-photo-cell { aspect-ratio: auto; background: #2B2F2C; }
.px-photo-grid.is-one .px-photo-cell img { height: auto; max-height: 56vh; object-fit: contain; }

/* ---- a photo filling the screen ------------------------------------------------------------- */

.px-viewer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #0E0F0E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.px-viewer-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.px-viewer-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    color: #FFFFFF;
}

.px-viewer-btn {
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 24px;
    background: rgba(0, 0, 0, .45);
    color: #FFFFFF;
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.px-viewer-btn svg { width: 24px; height: 24px; }
.px-viewer-count { font-size: 15px; font-weight: 800; }

.px-viewer-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
}

.px-viewer-step {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 64px;
    margin-top: -32px;
    border: 0;
    background: rgba(0, 0, 0, .35);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.px-viewer-step svg { width: 26px; height: 26px; }
.px-viewer-step.is-back { left: 0; border-radius: 0 12px 12px 0; }
.px-viewer-step.is-next { right: 0; border-radius: 12px 0 0 12px; }

/* ---- the job brief -------------------------------------------------------------------------- */

.px-brief-card {
    width: 100%;
    border: 0;
    border-left: 4px solid var(--px-fill);
    border-radius: 14px;
    background: var(--px-card);
    color: var(--px-ink);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-family: var(--px-font);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.px-brief-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.px-brief-card-line { font-size: 15px; font-weight: 700; line-height: 1.35; }

.px-say { gap: 10px; }
.px-say svg { width: 24px; height: 24px; }
.px-say .px-say-stop { display: none; }
.px-say.is-speaking { border-color: var(--px-fill); color: var(--px-deep); }
.px-say.is-speaking .px-say-go { display: none; }
.px-say.is-speaking .px-say-stop { display: inline; }

.px-brief-map {
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: #DCE3DE;
    cursor: pointer;
}

.px-brief-maplink { align-self: flex-start; margin-top: -6px; }

.px-brief-facts {
    margin: 0;
    background: var(--px-card);
    border-radius: 14px;
    padding: 4px 14px;
    display: flex;
    flex-direction: column;
}

.px-brief-facts > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--px-line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.px-brief-facts > div:last-child { border-bottom: 0; }

.px-brief-facts dt {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--px-muted);
}

.px-brief-facts dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--px-ink);
}

.px-brief-facts .is-unknown dd { color: var(--px-bad-ink); font-weight: 700; }

.px-app .px-brief-sub { font-size: 16px; font-weight: 900; margin-top: 2px; }

.px-brief-note {
    font-size: 15px;
    line-height: 1.45;
    color: var(--px-ink-2);
    background: var(--px-card);
    border-radius: 12px;
    padding: 10px 12px;
}

.px-brief-note strong { display: block; font-size: 13px; color: var(--px-muted); }

/* ---- the recording form (2 October 2026) ----------------------------------------------------- */

/* One question a screen; every control a thumb's width; Next always in the same place. */
.px-rec-head { display: flex; align-items: flex-start; gap: 4px; }
.px-rec-head-text { min-width: 0; padding-top: 4px; }

.px-rec-dots { display: flex; gap: 6px; margin-top: -8px; }
.px-rec-dots span { flex: 1; height: 5px; border-radius: 3px; background: var(--px-line); }
.px-rec-dots span.is-done { background: var(--px-good); }
.px-rec-dots span.is-on { background: var(--px-ink); }

.px-rec-step { gap: 10px; }

.px-rec-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.px-rec-type {
    min-height: 64px;
    border: 1px solid var(--px-line-strong);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--px-ink);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    text-align: left;
    font-family: var(--px-font);
    cursor: pointer;
}

.px-rec-type b { font-size: 18px; font-weight: 900; }
.px-rec-type span { font-size: 13px; color: var(--px-muted); }
.px-rec-type.is-on { border: 2px solid var(--px-ink); background: var(--px-fill); }
.px-rec-type.is-on span { color: var(--px-ink-2); }

.px-rec-number { display: flex; align-items: center; gap: 8px; }
.px-rec-number-input { flex: 1; text-align: center; font-size: 24px; font-weight: 900; letter-spacing: .04em; min-height: 56px; }

.px-rec-round {
    flex: none;
    width: 52px;
    height: 52px;
    border: 1px solid var(--px-line-strong);
    border-radius: 26px;
    background: #FFFFFF;
    color: var(--px-ink);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.px-rec-round:active { background: #F1ECE4; }

.px-rec-facts { margin: 4px 0 0; display: flex; flex-direction: column; }
.px-rec-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--px-line); }
.px-rec-facts dt { font-size: 14px; color: var(--px-muted); flex: none; }
.px-rec-facts dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.px-rec-spit {
    border: 1px solid var(--px-line);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #FFFCF9;
}

.px-rec-spit-head { display: flex; align-items: center; gap: 10px; }
.px-rec-spit-head b { font-size: 17px; font-weight: 900; flex: none; }
.px-rec-depths { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.px-rec-depth { width: 96px; min-height: 48px; text-align: center; font-weight: 800; }

.px-rec-x {
    flex: none;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: #F1ECE4;
    color: var(--px-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.px-rec-quick { display: flex; gap: 8px; }

.px-rec-quick button {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--px-line-strong);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--px-ink);
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.px-rec-count { display: flex; align-items: center; gap: 8px; }
.px-rec-count > span { flex: 1; font-size: 15px; font-weight: 700; }
.px-rec-count-input { width: 84px; min-height: 52px; text-align: center; font-size: 22px; font-weight: 900; }

.px-rec-context-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.px-rec-with { align-items: center; }
.px-rec-with .px-hint, .px-rec-munsell .px-hint { font-weight: 700; margin-right: 2px; }

.px-rec-munsell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.px-rec-munsell .px-choice { min-width: 44px; padding: 0 10px; }

.px-rec-photo {
    display: block;
    width: 100%;
    max-height: 44vh;
    object-fit: cover;
    border-radius: 12px;
    background: #2B2F2C;
}

.px-rec-outstanding {
    border-radius: 12px;
    background: var(--px-warn-soft);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.px-rec-outstanding ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--px-ink-2); }

.px-rec-error {
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--px-bad-soft);
    color: var(--px-bad-ink);
    font-size: 14px;
    font-weight: 700;
}

.px-rec-bar .px-two { max-width: 520px; margin: 0 auto; }
.px-rec-bar .px-btn { margin: 0; }

/* What is left on the step, above the buttons (4 October 2026) - the toolbox's line, with the feedback pencil
   beside it rather than on it, and room left under the page for the taller bar. */
.px-rec-bar .px-tb-todo { max-width: 520px; margin: 0 auto 8px; box-sizing: border-box; }

@media (max-width: 600px) {
    .px-rec-bar .px-tb-todo { margin-right: 54px; }
}

.px-app:has(.px-rec-bar .px-tb-todo) .feedback-fab.feedback-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
}

.px-main-bare:has(.px-rec-bar .px-tb-todo) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 180px);
}

/* ---- the job's map (2 October 2026) --------------------------------------------------------- */

/* The whole screen, under nothing - Adam: "it needs to fill the whole screen". */
.px-map-page {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: #DCE3DE;
    overflow: hidden;
}

.px-map-canvas {
    position: absolute;
    inset: 0;
}

/* Pointer events off on the frame so the map underneath can be dragged between the buttons. */
.px-map-head,
.px-map-ui {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.px-map-head > *,
.px-map-ui > * { pointer-events: auto; }

.px-map-head {
    bottom: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.px-map-name {
    min-width: 0;
    max-width: calc(100% - 128px);
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.px-map-name strong {
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.px-map-name span { font-size: 13px; color: var(--px-bad-ink); font-weight: 700; }

/* All our jobs (feedback #220): which colour is which, with how many. */
.px-map-name span.px-map-key { display: flex; align-items: center; gap: 5px; color: var(--px-muted); font-weight: 800; white-space: nowrap; }
.px-map-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.px-map-key i.is-now { background: #E8590C; }
.px-map-key i.is-rest { margin-left: 6px; background: #2F4B7C; }
/* The team on the map of all the jobs (feedback #251): who's checked in where, and why anyone else isn't on it. */
.px-map-teamkey { display: flex; align-items: center; gap: 5px; margin: 1px 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 800; color: var(--px-ink); white-space: nowrap; cursor: pointer; }
.px-map-teamkey i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #FFCC00; box-shadow: 0 0 0 2px #16191C; }
.px-map-teamkey span { color: var(--px-muted); }
.px-map-team {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 92px);
    left: 12px;
    right: 72px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
    z-index: 5;
}
.px-map-teamrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--px-ink); font: inherit; text-align: left; }
button.px-map-teamrow { cursor: pointer; }
button.px-map-teamrow:active { background: var(--px-tint); }
.px-map-teambadge { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--px-off); color: var(--px-off-ink); }
.px-map-teambadge.is-on { background: #FFCC00; color: #16191C; box-shadow: inset 0 0 0 3px #16191C; }
.px-map-teamtext { min-width: 0; display: flex; flex-direction: column; }
.px-map-teamtext strong { font-size: 15px; font-weight: 800; }
.px-map-teamtext small { font-size: 13px; color: var(--px-muted); }
a.px-inspire-btn { text-decoration: none; }

.px-mapc-btn {
    flex: none;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 24px;
    background: #FFFFFF;
    color: var(--px-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.px-mapc-btn svg { width: 24px; height: 24px; }
.px-mapc-btn[aria-pressed="true"] { background: var(--px-ink); color: #FFFFFF; }

.px-mapc-side {
    position: absolute;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Where am I: the biggest button, bottom right, under the thumb. */
.px-mapc-locate {
    position: absolute;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 31px;
    background: #FFFFFF;
    color: var(--px-ink);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.px-mapc-locate svg { width: 30px; height: 30px; }
.px-mapc-locate .px-mapc-locate-dot { fill: none; }
.px-mapc-locate.is-on { color: #2563AF; }
.px-mapc-locate.is-following { background: #2563AF; color: #FFFFFF; }
.px-mapc-locate.is-following .px-mapc-locate-dot { fill: currentColor; }

/* Record where you stand: above the locate button, in the recording forms' own black, so it is never
   taken for the orange feedback pencil. */
.px-mapc-record {
    position: absolute;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    height: 52px;
    padding: 0 18px 0 12px;
    border-radius: 26px;
    background: #1D1D1D;
    color: #FFFFFF;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--px-font);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.px-mapc-record svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* "Zoom in to see property parcels" (7 October 2026, Adam, #282, #283): a switched-on state layer the
   state's server does not draw at this zoom. Top centre, dark so it reads on map and satellite alike. */
.px-mapc-zoomhint {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    max-width: calc(100% - 120px);
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 20px;
    background: rgba(30, 28, 25, .88);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    font-family: var(--px-font, inherit);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.px-mapc-zoomhint[hidden] { display: none; }

/* How far the dot can be trusted. */
.px-mapc-gps {
    position: absolute;
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    max-width: calc(100% - 100px);
    min-height: 44px;
    padding: 6px 14px;
    border: 0;
    border-radius: 22px;
    background: #FFFFFF;
    color: var(--px-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 800;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    cursor: pointer;
}

.px-mapc-gps small { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--px-muted); }

.px-mapc-gps-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--px-muted);
}

.px-mapc-gps.is-good .px-mapc-gps-dot { background: var(--px-good); }
.px-mapc-gps.is-fair .px-mapc-gps-dot { background: #D99A2B; }
.px-mapc-gps.is-poor .px-mapc-gps-dot { background: #C0392B; }
.px-mapc-gps.is-note { font-size: 14px; font-weight: 700; line-height: 1.35; cursor: default; }

/* What was tapped. */
.px-mapc-card {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
    max-width: 540px;
    max-height: 58vh;
    margin: 0 auto;
    overflow-y: auto;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.px-mapc-card[hidden],
.px-mapc-sheet[hidden],
.px-mapc-gps[hidden] { display: none; }

.px-mapc-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: #F1ECE4;
    color: var(--px-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.px-mapc-x svg { width: 20px; height: 20px; }

.px-mapc-photo {
    display: block;
    margin: -4px -4px 4px;
    border-radius: 12px;
    overflow: hidden;
    background: #2B2F2C;
}

.px-mapc-photo img { display: block; width: 100%; max-height: 260px; object-fit: contain; }

.px-mapc-layer { font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--px-muted); padding-right: 44px; }
.px-mapc-title { font-size: 18px; font-weight: 900; line-height: 1.25; padding-right: 44px; }
/* The colour a landform is drawn in, beside its name - as faint as it is on the map. */
.px-mapc-key { display: inline-block; width: 14px; height: 14px; margin-right: 7px; border-radius: 4px; vertical-align: -1px; opacity: .6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.px-mapc-detail { font-size: 14px; line-height: 1.4; color: var(--px-ink-2); }

.px-mapc-fields { margin: 4px 0 0; display: flex; flex-direction: column; }
.px-mapc-fields > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--px-line); }
.px-mapc-fields dt { font-size: 14px; color: var(--px-muted); }
.px-mapc-fields dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.px-mapc-link {
    align-self: flex-start;
    min-height: 44px;
    border: 0;
    padding: 0;
    background: none;
    display: flex;
    align-items: center;
    color: var(--px-link);
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.px-mapc-actions { display: flex; gap: 20px; }

/* The layers, from the bottom like the phone's own share sheet. */
.px-mapc-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 560px;
    max-height: 72vh;
    margin: 0 auto;
    border-radius: 20px 20px 0 0;
    background: #FFFFFF;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
}

.px-mapc-sheet-head {
    position: relative;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--px-line);
    font-size: 17px;
}

.px-mapc-sheet-head .px-mapc-x { top: 8px; }

.px-mapc-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

.px-mapc-group {
    margin: 14px 0 4px !important;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--px-muted);
}

.px-mapc-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #F0ECE5;
    cursor: pointer;
}

.px-mapc-row input { width: 22px; height: 22px; flex: none; accent-color: var(--px-ink); }

.px-mapc-swatch { flex: none; width: 18px; height: 18px; border-radius: 5px; }

.px-mapc-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.px-mapc-name small { font-size: 12px; font-weight: 600; color: var(--px-muted); }

.px-mapc-none { font-size: 14px; color: var(--px-muted); margin: 12px 0 !important; }

.px-mapc-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: #F1ECE4;
}

.px-mapc-seg label { position: relative; cursor: pointer; }
.px-mapc-seg input { position: absolute; opacity: 0; }

.px-mapc-seg span {
    min-height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: var(--px-muted);
}

.px-mapc-seg input:checked + span { background: #FFFFFF; color: var(--px-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* OpenLayers' own pieces, moved out from under the thumbs. */
.px-map-page .ol-scale-line {
    left: 12px;
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    bottom: auto;
}

/* The imagery's credit, which its terms require, under the scale - clear of every thumb control. */
.px-map-page .ol-attribution {
    left: 12px;
    right: auto;
    top: calc(env(safe-area-inset-top, 0px) + 92px);
    bottom: auto;
    flex-direction: row;
    max-width: calc(100% - 90px);
}

/* The feedback button joins the column of map buttons on the right, where it covers nothing, and
   steps aside while a card or the layer list is open. */
.px-app:has(.px-map-page) .feedback-fab.feedback-fab {
    top: calc(env(safe-area-inset-top, 0px) + 184px);
    bottom: auto;
    right: 12px;
    left: auto;
}

.px-app:has(.px-mapc-card:not([hidden])) .feedback-fab.feedback-fab,
.px-app:has(.px-mapc-sheet:not([hidden])) .feedback-fab.feedback-fab { display: none; }

/* ---- TODAY: THE SKY, THE SHORTCUTS, ASK (2 October 2026) -----------------------------------------

   Adam Deane, on Today: "current weather at, predicting weather, wind. Something cool ... sexy and
   informative but also easy to get to the work stuff." The weather panel takes the colour of its sky -
   clear blue, cloud grey, rain slate, night navy - with the temperature large, the wind and the rain
   in three plain figures, and the hours ahead in a strip to swipe. White on every one of these
   backgrounds is 4.5:1 or better. */

.px-wx {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px 18px 14px;
    color: #FFFFFF;
    background: linear-gradient(160deg, #3D6E9E 0%, #7FA6C9 100%);
    box-shadow: 0 10px 28px rgba(31, 41, 55, .22);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.px-wx.is-clear { background: linear-gradient(160deg, #1F5F99 0%, #3B86C4 62%, #C77A2E 140%); }
.px-wx.is-partly { background: linear-gradient(160deg, #2E5C86 0%, #5E88AE 100%); }
.px-wx.is-cloud { background: linear-gradient(160deg, #46505A 0%, #6F7A85 100%); }
.px-wx.is-rain { background: linear-gradient(160deg, #233A47 0%, #3E5B68 100%); }
.px-wx.is-storm { background: linear-gradient(160deg, #23243A 0%, #43465F 100%); }
.px-wx.is-night { background: linear-gradient(160deg, #0E1A30 0%, #24395E 100%); }

.px-app .px-wx p { color: #FFFFFF; }

.px-wx-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.px-wx-where {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .92;
}

/* The street address and whose country it is, under the place. */
.px-wx-address {
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    opacity: .9;
    overflow-wrap: anywhere;
}

/* What the RAP's own policy says at this reading. */
.px-wx-policy {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    font-size: 14px;
    line-height: 1.4;
}

.px-wx-policy p + p { margin-top: 6px; }

.px-wx-policy-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .9;
}

.px-wx-policy-source { font-size: 12px; opacity: .8; }

/* FOLDED (3 October 2026): the line says what of the policy the readings reach; opened, each step with
   now and the next six hours marked against it, and the RAP's own documents. */
.px-wx-policy > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
}

.px-wx-policy > summary::-webkit-details-marker { display: none; }

.px-wx-policy-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.px-wx-policy-verdict { font-size: 15px; font-weight: 700; line-height: 1.3; }

.px-wx-policy-chev {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}

.px-wx-policy[open] .px-wx-policy-chev { transform: rotate(180deg); }

.px-wx-rule { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .2); }

.px-app .px-wx .px-wx-rule-text { margin-top: 4px; opacity: .92; }

.px-app .px-wx .px-wx-rule.is-now .px-wx-rule-text { font-weight: 700; opacity: 1; }

.px-wx-steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.px-wx-steps li {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 8px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 13px;
    opacity: .7;
}

.px-wx-step-at { font-weight: 800; }

.px-wx-step-mark {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #FFE08A;
    color: #3A2A00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.px-wx-steps li.is-now { opacity: 1; background: rgba(255, 196, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 226, 140, .6); }
.px-wx-steps li.is-later { opacity: 1; background: rgba(255, 255, 255, .12); }
.px-wx-steps li.is-later .px-wx-step-mark { background: rgba(255, 255, 255, .88); color: #233A47; }

.px-wx-docs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.px-app .px-wx .px-wx-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    color: #1F2A33;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.px-wx-doc svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.px-wx-policy .px-wx-policy-source { margin-top: 10px; }

/* Whose country, and how ArchEx knows (4 October 2026): every RAP has its own policy. */
.px-wx-policy .px-wx-policy-basis { margin: 4px 0 10px; font-size: 13px; line-height: 1.45; opacity: .92; }
.px-wx-policy .px-wx-policy-basis b { font-weight: 800; }

/* Waiting on site: what time "now" is, check again, and the rain radar. */
.px-wx-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: -4px; font-size: 12px; }

.px-wx-live-when { flex: 1 1 100%; opacity: .85; }

.px-app .px-wx .px-wx-check,
.px-app .px-wx .px-wx-radar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.px-app .px-wx .px-wx-check:disabled { opacity: .6; }

.px-wx-radar svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.px-wx-temp {
    margin-top: 4px;
    font-size: 68px;
    font-weight: 800;
    line-height: .95;
    letter-spacing: -2px;
}

.px-wx-temp span { font-size: 40px; vertical-align: top; font-weight: 700; }

.px-wx-cond { margin-top: 6px; font-size: 16px; font-weight: 700; }

.px-wx-range { margin-top: 2px; font-size: 14px; opacity: .9; }

.px-wx-icon svg {
    width: 84px;
    height: 84px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
}

.px-wx-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.px-wx-stats > div {
    background: rgba(255, 255, 255, .14);
    border-radius: 14px;
    padding: 10px 10px 9px;
    min-width: 0;
}

.px-wx-stats dt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .85;
}

.px-wx-stats dd {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.px-wx-stats dd small { font-size: 12px; font-weight: 700; opacity: .9; }

.px-wx-stats dd.px-wx-sub {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
}

.px-wx-arrow {
    display: inline-flex;
    width: 18px;
    height: 18px;
}

.px-wx-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-app .px-wx .px-wx-flag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 196, 0, .24);
    border: 1px solid rgba(255, 226, 140, .55);
    font-size: 14px;
    font-weight: 800;
}

.px-wx-flag svg {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #FFE08A;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-wx-hours {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 -18px;
    padding: 0 18px 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.px-wx-hours::-webkit-scrollbar { display: none; }

.px-wx-hour {
    flex: none;
    min-width: 58px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 6px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    font-size: 13px;
}

.px-wx-hour strong { font-size: 17px; font-weight: 800; }

.px-wx-hour-time { font-weight: 700; opacity: .9; }

.px-wx-hour-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-wx-hour-rain,
.px-wx-hour-wind { font-size: 12px; opacity: .9; }

.px-wx-hour-rain.is-likely { font-weight: 800; color: #CFE8FF; opacity: 1; }
.px-wx-hour-wind.is-gusty { font-weight: 800; color: #FFE08A; opacity: 1; }

.px-app .px-wx .px-wx-key { font-size: 11px; opacity: .75; margin-top: -6px; }

/* Nothing placed to read the weather for: ask the phone where it is, when asked. */
.px-wx-ask {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    border: 1px dashed var(--px-line-strong);
    border-radius: 16px;
    background: var(--px-card);
    color: var(--px-link);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.px-wx-ask svg {
    flex: none;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- a job's shortcuts, under its button -------------------------------------------------------- */

.px-quick {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    gap: 8px;
}

.px-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 8px 4px;
    border-radius: 14px;
    background: var(--px-soft);
    color: var(--px-deep);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.px-quick-item:active { filter: brightness(.95); }

.px-quick-item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Ask, floating above the feedback button ---------------------------------------------------- */

/* Round, like the feedback button under it and the same width - a wide pill sat over the text of
   the card beneath it. */
.px-ask-fab {
    position: fixed;
    right: 14px;
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 82px);
    z-index: 900;
    width: 58px;
    height: 58px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--px-ink);
    color: #FFFFFF;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
    cursor: pointer;
}

.px-ask-fab svg {
    width: 22px;
    height: 22px;
    fill: var(--px-fill);
    stroke: none;
}

.px-ask-fab:active { transform: scale(.97); }

.px-asksheet .px-answer { white-space: pre-wrap; }

.px-ask-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
}

.px-ask-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--px-fill);
    animation: px-ask-pulse 1.2s ease-in-out infinite;
}

@keyframes px-ask-pulse {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .px-ask-dot { animation: none; }
}

/* "Weather where I am instead" - a quiet link at the foot of the panel. */
.px-app .px-wx .px-wx-here {
    align-self: flex-start;
    margin-top: -4px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: .9;
    cursor: pointer;
}

/* ---- THE WEATHER AS ONE LINE (3 October 2026) ----------------------------------------------------
   The job comes first on Today; the weather is this one bar - the reading, and whether anything in it
   needs a look - and the full panel opens under it. Same skies as the panel. */
.px-wx-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: 18px;
    color: #FFFFFF;
    text-align: left;
    font: inherit;
    cursor: pointer;
    background: linear-gradient(160deg, #3D6E9E 0%, #7FA6C9 100%);
    box-shadow: 0 6px 18px rgba(31, 41, 55, .18);
}
.px-wx-bar.is-clear { background: linear-gradient(160deg, #1F5F99 0%, #3B86C4 62%, #C77A2E 140%); }
.px-wx-bar.is-partly { background: linear-gradient(160deg, #2E5C86 0%, #5E88AE 100%); }
.px-wx-bar.is-cloud { background: linear-gradient(160deg, #46505A 0%, #6F7A85 100%); }
.px-wx-bar.is-rain { background: linear-gradient(160deg, #233A47 0%, #3E5B68 100%); }
.px-wx-bar.is-storm { background: linear-gradient(160deg, #23243A 0%, #43465F 100%); }
.px-wx-bar.is-night { background: linear-gradient(160deg, #0E1A30 0%, #24395E 100%); }
.px-wx-bar:focus-visible { outline: 3px solid var(--px-fill); outline-offset: 2px; }
.px-wx-bar-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; }
.px-wx-bar-icon svg { width: 34px; height: 34px; fill: none; stroke: #FFFFFF; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.px-wx-bar-temp { flex: none; font-size: 30px; font-weight: 800; line-height: 1; }
.px-wx-bar-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.px-wx-bar-text strong { font-size: 16px; font-weight: 800; }
.px-wx-bar-text small { font-size: 13px; line-height: 1.3; opacity: .92; }
.px-wx-bar-chip { flex: none; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.px-wx-bar-chip.is-check { background: var(--px-fill); color: var(--px-fill-ink); }
.px-wx-bar-chip.is-ok { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.px-wx-bar-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .2s; }
.px-wx-bar[aria-expanded="true"] .px-wx-bar-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .px-wx-bar-chev { transition: none; } }

/* ==== SITE: THE FRAME, THE JOB ON ITS MAP, THE DAY UNDER THE THUMB (3 October 2026) ==================

   The pieces the redesign added. The charcoal frame carries a faint survey contour, drawn here rather
   than downloaded, so the tops of the screens read as the field, not as a form. */

.px-app {
    --px-contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='260' viewBox='0 0 480 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.3'%3E%3Cpath d='M-20 52c70-34 130 30 210 6s150-58 310-18'/%3E%3Cpath d='M-20 80c70-34 130 30 210 6s150-58 310-18'/%3E%3Cpath d='M-20 108c70-34 130 30 210 6s150-58 310-18'/%3E%3Cpath d='M-20 136c70-34 130 30 210 6s150-58 310-18'/%3E%3Cpath d='M-20 164c70-34 130 30 210 6s150-58 310-18'/%3E%3Cpath d='M-20 192c70-34 130 30 210 6s150-58 310-18'/%3E%3Cpath d='M-20 220c70-34 130 30 210 6s150-58 310-18'/%3E%3Cellipse cx='372' cy='58' rx='34' ry='15'/%3E%3Cellipse cx='372' cy='58' rx='62' ry='29'/%3E%3Cellipse cx='96' cy='206' rx='26' ry='12'/%3E%3Cellipse cx='96' cy='206' rx='50' ry='24'/%3E%3C/g%3E%3C/svg%3E");
}

/* Pulled up under the phone's own clock, so the charcoal starts at the very top of the glass. */
.px-band,
.px-main > .px-head:first-child {
    position: relative;
    margin: calc(-1 * (env(safe-area-inset-top, 0px) + 20px)) -20px 0;
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px 22px;
    background: var(--px-night) var(--px-contours) right -60px top -30px / 520px auto no-repeat;
    border-radius: 0 0 28px 28px;
    color: #FFFFFF;
}

.px-band { display: flex; flex-direction: column; gap: 18px; }
.px-band .px-head { align-items: flex-start; }

.px-app .px-band .px-title,
.px-app .px-main > .px-head:first-child .px-title { color: #FFFFFF; }

.px-main > .px-head:first-child .px-sub { color: var(--px-night-text); }

.px-main > .px-head:first-child .px-btn-quiet {
    background: transparent;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .32);
}

.px-band-date {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--px-fill);
    margin-bottom: 6px;
}

/* The canvas behind a pulled-down screen is the frame's colour, not a white strip. */
html:has(.px-band),
html:has(.px-jobhero),
html:has(.px-main > .px-head:first-child) { background: #16191C; }

/* The weather, inside the frame: one quiet line, its sky a tint rather than a slab of colour. */
.px-app .px-band .px-wx-bar {
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    border-radius: 18px;
    padding: 10px 12px;
}

.px-app .px-band .px-wx-bar:active { background: rgba(255, 255, 255, .13); }
.px-band .px-wx-bar-temp { font-size: 28px; }
.px-band .px-wx-bar-chip.is-ok { background: rgba(255, 255, 255, .14); }

/* ---- Today's cards -------------------------------------------------------------------------- */

/* What the card is - on now, today, also today - as a label with a light, not a line of orange capitals. */
.px-app .px-hero .px-eyebrow {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--px-tint);
    color: var(--px-ink);
    letter-spacing: .08em;
}

.px-app .px-hero.is-live .px-eyebrow { background: var(--px-good-soft); color: var(--px-good-ink); }

.px-app .px-hero.is-live .px-eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--px-good);
    animation: px-live 2.2s ease-in-out infinite;
}

@keyframes px-live {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 127, 75, .45); }
    50% { box-shadow: 0 0 0 5px rgba(26, 127, 75, 0); }
}

.px-hero h2 { margin-top: 4px; }
.px-hero-stage { font-size: 15px; font-weight: 700; color: var(--px-good-ink); }

.px-quick-item {
    background: var(--px-tint);
    color: var(--px-ink);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
}

.px-quick-item svg { width: 24px; height: 24px; }

/* Coming up: the day as a calendar leaf, so a week reads at a glance. */
.px-upnext { justify-content: flex-start; padding: 10px 14px 10px 10px; }
.px-upnext .px-row-text { flex: 1; }

.px-datetile {
    flex: none;
    width: 52px;
    height: 56px;
    border-radius: 14px;
    background: var(--px-night);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.px-datetile small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--px-fill);
}

.px-datetile b { margin-top: 4px; font-size: 22px; font-weight: 800; }

/* ---- the job: its site across the top ------------------------------------------------------- */

.px-jobhero {
    position: relative;
    margin: calc(-1 * (env(safe-area-inset-top, 0px) + 20px)) -20px 0;
    height: calc(env(safe-area-inset-top, 0px) + 128px);
    background: var(--px-night) var(--px-contours) center / 520px auto;
    overflow: hidden;
}

.px-jobhero.has-map {
    height: calc(env(safe-area-inset-top, 0px) + 38vh);
    min-height: 250px;
    max-height: 380px;
    background-color: #2A3036;
}

.px-jobhero-map { position: absolute; inset: 0; cursor: pointer; }

/* A soft shade under the buttons, so they read over bright paddock and pale imagery alike. */
.px-jobhero.has-map::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(env(safe-area-inset-top, 0px) + 72px);
    background: linear-gradient(rgba(0, 0, 0, .32), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.px-hero-btn {
    position: absolute;
    z-index: 3;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    height: 44px;
    min-width: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .97);
    color: var(--px-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.px-hero-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-hero-back { left: 14px; width: 44px; }
.px-hero-back svg { width: 24px; height: 24px; stroke-width: 2.6; }

.px-hero-right {
    position: absolute;
    z-index: 3;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 14px;
    display: flex;
    gap: 8px;
}

.px-hero-right .px-hero-btn { position: static; padding: 0 14px 0 12px; }

/* The imagery's credit, which its terms require: small, at the left above the card's edge. Doubled
   class to outrank OpenLayers' own ".ol-attribution.ol-uncollapsible", which loads after this file. */
.px-jobhero .ol-attribution.ol-uncollapsible {
    left: 10px;
    right: auto;
    bottom: 36px;
    max-width: calc(100% - 20px);
    background: rgba(255, 255, 255, .72);
    border-radius: 6px;
}

.px-jobhero .ol-attribution ul { font-size: 9px; color: #333; text-shadow: none; padding: 1px 6px; }
.px-jobhero .ol-attribution button { display: none; }

/* ---- the job's card, over its map ----------------------------------------------------------- */

.px-jobcard {
    position: relative;
    z-index: 2;
    margin-top: -46px;
    background: var(--px-card);
    border-radius: 26px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 -4px 22px rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .06);
}

.px-jobcard .px-sub { margin-top: -8px; }
.px-jobcard .px-vahr { margin: 0; }
.px-jobcard-note { font-size: 14px; line-height: 1.45; }

/* The things done on a job, in one row, each a key with its name under it. */
.px-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 2px;
}

.px-action {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--px-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.px-action-icon {
    position: relative;
    width: 100%;
    height: 62px;
    border-radius: 18px;
    background: var(--px-tint);
    display: grid;
    place-items: center;
    transition: transform .08s ease;
}

.px-action-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-action.is-primary .px-action-icon {
    background: var(--px-fill);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14);
}

.px-action:active .px-action-icon { transform: translateY(1px); filter: brightness(.95); }

.px-action-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.px-action-flag {
    position: absolute;
    top: -5px;
    right: -3px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--px-bad);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 2px var(--px-card);
}

.px-actions-hint { margin-top: -4px; color: var(--px-bad-ink); font-weight: 600; }

/* The brief's headline, under the keys: what the job is at, one tap from the whole brief. */
.px-brief-line {
    width: 100%;
    padding: 12px 12px 12px 14px;
    border: 0;
    border-radius: 16px;
    background: var(--px-tint);
    color: var(--px-ink-2);
    display: flex;
    align-items: center;
    gap: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}

.px-brief-line > span { flex: 1; min-width: 0; }

/* Who was here last: a line with a light - green while they are still on site. */
.px-last {
    background: var(--px-card);
    border-radius: 16px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
}

.px-last > h2,
.px-last > p { grid-column: 2; }

.px-last-dot {
    grid-row: 1 / span 2;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--px-line-strong);
}

.px-last-dot.is-live { background: var(--px-good); box-shadow: 0 0 0 4px var(--px-good-soft); }

.px-notebox .px-textarea { min-height: 64px; }

/* ---- the day's button, pinned above the tabs ------------------------------------------------ */

.px-main:has(.px-stagebar) {
    padding-bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 220px);
}

.px-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px));
    z-index: 850;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.px-dock > * { pointer-events: auto; }

/* THE DAY'S BAR STANDS ON SOLID GROUND (4 October 2026, feedback #184 "The bottom tabs overlap"). The
   diary scrolled behind it and showed through the gaps either side and below it, so the bar and the list
   looked laid over each other. The ground colour now fills behind the bar down to the tabs, fading in
   above it so the list slides under cleanly; nothing behind it can be tapped by mistake. */
.px-dock:has(.px-stagebar) {
    padding-top: 22px;
    background: linear-gradient(to bottom, rgba(238, 238, 234, 0) 0, var(--px-ground) 22px);
    pointer-events: auto;
}

.px-stagebar {
    background: var(--px-night);
    border-radius: 24px;
    padding: 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .05);
}

.px-app .px-stagebar-line {
    padding: 0 4px;
    color: var(--px-night-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.px-stagebar-line strong { color: #FFFFFF; }

.px-stagebar-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.px-stagebar-top .px-stagebar-line { flex: 1; min-width: 0; }

/* The day's five steps as dots on a line: done green, now hi-vis, still to come grey. */
.px-daytrack {
    flex: none;
    margin: 0;
    padding: 0 4px 0 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.px-daytrack li {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 5px;
    background: var(--px-night-3);
}

.px-daytrack li + li { margin-left: 12px; }

.px-daytrack li + li::before {
    content: "";
    position: absolute;
    right: 9px;
    top: 4px;
    width: 12px;
    height: 1px;
    background: var(--px-night-3);
}

.px-daytrack li.is-done { background: #34C873; }
.px-daytrack li.is-done + li::before { background: #34C873; }
.px-daytrack li.is-now { background: var(--px-fill); box-shadow: 0 0 0 3px rgba(255, 204, 0, .25); }

.px-stagebar-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.px-stagebar .px-btn { min-height: 56px; font-size: 17px; padding: 0 12px; }

/* A day left open overnight (4 October 2026): the question wraps rather than losing its end, and the time
   it asks for sits beside the button, as big as the button. 18px, so Safari does not zoom in on it. */
.px-app .px-stagebar-line.is-asking { white-space: normal; color: #FFFFFF; }

.px-stagebar-time {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    border: 0;
    border-radius: 16px;
    padding: 0 12px;
    background: #FFFFFF;
    color: var(--px-ink);
    font-family: var(--px-font);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* The question takes three lines - it says where its suggested time came from - so the floating buttons step
   up over it. */
.px-app:has(.px-stagebar-line.is-asking) .px-ask-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 168px);
}

.px-app:has(.px-stagebar-line.is-asking) .feedback-fab.feedback-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 173px);
}

.px-stagebar-go > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.px-stagebar-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 5px;
    vertical-align: 1px;
    background: var(--px-good);
}

.px-stagebar-dot.is-live { background: #34C873; animation: px-live 2.2s ease-in-out infinite; }
.px-stagebar-dot.is-moving { background: #5B8DEF; }
.px-stagebar-dot.is-paused { background: #F2A93B; }
.px-stagebar-dot.is-done { background: #9AA1A8; }

/* What just happened, above the button for a few seconds. */
.px-app .px-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px 11px 16px;
    min-height: 48px;
    border-radius: 16px;
    background: var(--px-good);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    animation: px-rise .18s ease-out;
}

.px-app .px-toast.is-error { background: var(--px-bad); }
.px-app .px-toast.is-info { background: var(--px-night-2); padding-right: 16px; }
.px-toast > span:first-child { flex: 1; min-width: 0; }

.px-toast-x {
    flex: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.px-toast-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.px-toast-spin {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, .3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: px-spin .8s linear infinite;
}

@keyframes px-spin { to { transform: rotate(360deg); } }
@keyframes px-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The floating Ask and feedback buttons step up over the day's bar, side by side just above it, rather
   than sitting on it. The bar is always one line and one row of buttons, so its height is known. */
.px-app:has(.px-stagebar) .px-ask-fab {
    right: 72px;
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 130px);
}

.px-app:has(.px-stagebar) .feedback-fab.feedback-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 135px);
}

/* And over a message above the bar, while it shows - never on top of what it says. */
.px-app:has(.px-dock .px-toast) .px-ask-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 130px + 70px);
}

.px-app:has(.px-dock .px-toast) .feedback-fab.feedback-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 135px + 70px);
}

/* A message with no day's bar under it sits just above the tabs, and the buttons over it. */
.px-app:has(.px-dock .px-toast):not(:has(.px-stagebar)) .px-ask-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 82px + 70px);
}

.px-app:has(.px-dock .px-toast):not(:has(.px-stagebar)) .feedback-fab.feedback-fab {
    bottom: calc(var(--px-tabs-h) + env(safe-area-inset-bottom, 0px) + 14px + 70px);
}

@media (prefers-reduced-motion: reduce) {
    .px-app .px-hero.is-live .px-eyebrow::before,
    .px-stagebar-dot.is-live,
    .px-toast-spin { animation: none; }
    .px-app .px-toast { animation: none; }
    .px-action-icon { transition: none; }
}

/* ---- YOUR DAY: the star sign's card (3 October 2026) ------------------------------------------ */

.px-band-me { flex: none; display: flex; align-items: center; gap: 10px; }

.px-inspire-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .06);
    color: var(--px-fill);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.px-inspire-btn:active { background: rgba(255, 255, 255, .14); }

.px-inspire-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-sheet.px-inspire { background: var(--px-card); gap: 16px; }
.px-sheet.px-inspire.is-card { padding-top: 0; }

.px-inspire-top {
    margin: 0 -20px;
    padding: 22px 20px 20px;
    background: var(--px-night) var(--px-contours) right -80px top -40px / 520px auto no-repeat;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #FFFFFF;
}

.px-inspire-glyph {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: var(--px-fill);
    color: var(--px-fill-ink);
    display: grid;
    place-items: center;
    font-size: 34px;
    line-height: 1;
    box-shadow: 0 0 0 6px rgba(255, 204, 0, .18);
}

.px-inspire-who { flex: 1; min-width: 0; }

.px-app .px-inspire-sign { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--px-fill); }
.px-app .px-inspire-day { margin-top: 3px; font-size: 20px; font-weight: 800; color: #FFFFFF; }

.px-app .px-inspire-x { align-self: flex-start; margin: 0; background: rgba(255, 255, 255, .12); color: #FFFFFF; }

.px-app .px-inspire-headline { margin-top: 4px; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }

.px-inspire-reading { font-size: 17px; line-height: 1.5; color: var(--px-ink-2); }

.px-inspire-facts { margin: 0; padding: 2px 14px; border-radius: 16px; background: var(--px-tint); }

.px-inspire-facts > div {
    padding: 11px 0;
    border-bottom: 1px solid var(--px-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.px-inspire-facts > div:last-child { border-bottom: 0; }
.px-inspire-facts > div.is-wide { flex-direction: column; align-items: flex-start; gap: 3px; }

.px-inspire-facts dt {
    flex: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--px-muted);
}

.px-inspire-facts dd {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.px-inspire-facts dd small { font-size: 13px; font-weight: 600; color: var(--px-muted); }

.px-inspire-swatch {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.px-inspire-more { display: flex; justify-content: space-between; gap: 8px; margin-top: -6px; flex-wrap: wrap; }
.px-inspire-more .px-quiet-link { padding: 0 4px; font-size: 14px; }

/* ---- ASTROLOGY, OR THE DIG'S HOROSCOPE, OR NOTHING (7 October 2026, Adam, #319) - the question as three big choices; the
   birth form; Light and Deep side by side; the chart folded away under the reading. */
.px-astro-modes { display: flex; flex-direction: column; gap: 10px; }
.px-app .px-astro-mode {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%;
    padding: 14px; border: 2px solid var(--px-line, rgba(0, 0, 0, .1)); border-radius: 18px; background: var(--px-tint);
    color: var(--px-ink); font: inherit; text-align: left; cursor: pointer;
}
.px-app .px-astro-mode.is-chosen { border-color: var(--px-ink); background: var(--px-fill); color: var(--px-fill-ink); }
.px-astro-mode-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--px-card); font-size: 24px; line-height: 1; }
.px-astro-mode strong { display: block; font-size: 17px; font-weight: 900; }
.px-astro-mode small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.35; opacity: .8; }
.px-astro-form { display: flex; flex-direction: column; gap: 8px; }
.px-astro-find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.px-app .px-astro-find .px-btn { width: auto; margin: 0; padding: 0 18px; }
.px-app .px-astro-place {
    width: 100%; padding: 11px 14px; border: 1px solid var(--px-line, rgba(0, 0, 0, .1)); border-radius: 12px; background: var(--px-card);
    color: var(--px-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.px-astro-depth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.px-app .px-astro-depth-pick {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 2px solid var(--px-line, rgba(0, 0, 0, .1));
    border-radius: 14px; background: var(--px-tint); color: var(--px-ink); font: inherit; cursor: pointer;
}
.px-app .px-astro-depth-pick.is-chosen { border-color: var(--px-ink); background: var(--px-fill); color: var(--px-fill-ink); }
.px-astro-depth-pick strong { font-size: 16px; font-weight: 900; }
.px-astro-depth-pick small { font-size: 12px; opacity: .8; }
.px-astro-depth.is-small .px-astro-depth-pick { padding: 8px; }
.px-astro-chart { padding: 10px 14px; border-radius: 16px; background: var(--px-tint); }
.px-astro-chart summary { cursor: pointer; font-size: 15px; font-weight: 800; color: var(--px-ink); }
.px-astro-chart ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--px-ink-2); }

/* "px-zodiac", not "px-sign": that is the toolbox's whole-screen signing overlay. */
.px-zodiacs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.px-zodiac {
    padding: 12px 4px 10px;
    border: 1.5px solid var(--px-line-strong);
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--px-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font: inherit;
    cursor: pointer;
}

.px-zodiac.is-on { border: 2px solid var(--px-ink); background: var(--px-fill); }

/* ---- I'M BORED: Survey Snake (3 October 2026) ------------------------------------------------- */

.px-today-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.px-bored {
    min-height: 48px;
    padding: 0 16px 0 12px;
    border-radius: 24px;
    background: var(--px-night);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.px-bored svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--px-fill);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.px-bored svg circle { fill: var(--px-fill); stroke: none; }

/* IN A MEETING (7 October 2026, #323) - the same pill as "I'm bored", a button; hi-vis while it's on. */
.px-app .px-meeting { border: 0; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.px-meeting svg circle { fill: none; stroke: var(--px-fill); }
.px-app .px-meeting.is-chosen { background: var(--px-fill); color: var(--px-fill-ink); }
.px-meeting.is-chosen svg, .px-meeting.is-chosen svg circle { stroke: var(--px-fill-ink); }

/* The whole screen: a charcoal frame, the plan in the middle, the arrows under the thumbs. */
.px-main:has(.px-game) { padding: 0; max-width: none; }

.px-game {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--px-night) var(--px-contours) right -120px top -60px / 600px auto no-repeat;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
    gap: 10px;
    user-select: none;
    -webkit-user-select: none;
    /* A swipe anywhere steers (feedback #110), so nothing on this screen scrolls or zooms. */
    touch-action: none;
}

.px-game-bar { display: flex; align-items: center; gap: 10px; }
.px-game-back { position: static; width: 44px; flex: none; }

.px-game-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.px-game-title strong { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.px-game-title span { font-size: 12px; color: var(--px-night-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.px-game-scores { flex: none; display: flex; gap: 6px; }

.px-app .px-game-scores p {
    min-width: 56px;
    padding: 5px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.px-game-scores span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--px-night-text); }
.px-game-scores b { font-size: 22px; font-weight: 800; color: var(--px-fill); }

.px-game-board {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

.px-game-board canvas {
    display: block;
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(255, 204, 0, .35), 0 16px 40px rgba(0, 0, 0, .45);
}

.px-game-overlay {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    padding: 22px 20px 20px;
    border-radius: 22px;
    background: rgba(22, 25, 28, .92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.px-game-overlay[hidden] { display: none; }

.px-app .px-game-heading { font-size: 26px; font-weight: 800; color: #FFFFFF; letter-spacing: -.02em; }
.px-app .px-game-detail { font-size: 15px; line-height: 1.45; color: var(--px-night-text); }

.px-app .px-game-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--px-night-text);
}

.px-game-legend span { display: inline-flex; align-items: center; gap: 5px; }
.px-game-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.px-game-legend i.is-flake { background: #EEEAE0; border-radius: 2px; transform: rotate(45deg) scale(.85); }
.px-game-legend i.is-bead { background: #B5523A; }
.px-game-legend i.is-shell { background: #F3E9D6; border-radius: 12px 12px 2px 2px; }
.px-game-legend i.is-axe { background: #56685A; box-shadow: 0 0 0 2px #FFCC00; border-radius: 40% 60% 60% 40%; }
.px-game-legend i.is-bone { width: 5px; height: 14px; background: #E9DFC6; border-radius: 50% 50% 3px 3px; transform: rotate(35deg); }
.px-game-legend i.is-grindstone { width: 15px; height: 11px; background: #9A8C7A; box-shadow: inset 0 0 0 3px #9A8C7A, inset 0 0 0 7px #C4B8A4; }

/* WHO'S ON TOP (4 October 2026, feedback #202): everyone's best, highest first, yours picked out. */
.px-game-top { margin: 2px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); text-align: left; }
.px-game-top h2 { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--px-night-text); }
.px-game-top ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.px-game-top li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; font-size: 15px; color: #FFFFFF; }
.px-game-top li span:first-child { color: var(--px-night-text); font-weight: 800; }
.px-game-top li b { font-weight: 800; }
.px-game-top li.is-me { color: #FFCC00; }
.px-game-top p { margin: 0; font-size: 14px; color: var(--px-night-text); }

/* TWO BIG TURNS (3 October 2026, feedback #110): a key under each thumb, the full width between
   them, gloves in mind. The gap in the middle is the feedback button's. */
.px-game-pad {
    flex: none;
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    height: 84px;
    gap: 8px;
}

.px-game-key {
    border: 0;
    border-radius: 18px;
    background: var(--px-night-3);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 800;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3);
    cursor: pointer;
    touch-action: manipulation;
}

.px-game-key:active { background: var(--px-fill); color: var(--px-fill-ink); transform: translateY(1px); }
.px-game-key svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.px-game-key.is-turn-left { grid-column: 1; }
.px-game-key.is-turn-right { grid-column: 3; }

/* THE GAMES (5 October 2026, feedback #248): "I'm bored" opens a card for each, your best and who's on top. */
.px-games { display: grid; gap: 12px; padding: 4px 16px 24px; }
.px-gamecard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    background: var(--px-night) var(--px-contours) right -160px top -80px / 420px auto no-repeat;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.px-gamecard:active { transform: translateY(1px); }
.px-gamecard-art { flex: none; width: 72px; height: 72px; border-radius: 16px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.px-gamecard-art svg { width: 60px; height: 60px; }
.px-gamecard-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.px-gamecard-text strong { font-size: 19px; font-weight: 900; }
.px-gamecard-text small { font-size: 14px; color: var(--px-night-text); line-height: 1.35; }
.px-gamecard-scores { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--px-night-text); }
.px-gamecard-scores b { color: var(--px-fill); font-weight: 800; }

/* The feedback button sits in the gap between the two keys, centred on them. */
.px-app:has(.px-game) .feedback-fab.feedback-fab {
    left: calc(50% - 24px);
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px + 18px);
}
.px-zodiac-glyph { font-size: 28px; line-height: 1.15; }
.px-zodiac-name { font-size: 14px; font-weight: 800; }
.px-zodiac-dates { font-size: 11px; color: var(--px-muted); }

/* ==== TODAY: THE SKY, THEN THE DAY (3 October 2026, feedback #109) ====================================

   The job page opens on its site's map with the job's card laid over it, and Adam liked that best of all
   ("my favorite is when you go into a project and there is the map in the background"). Today does the
   same with the sky over the day's job: its colour by the weather and the hour, the sun or the moon, cloud
   drifting across and rain falling when it is, and the day's card laid over the foot of it. Everything that
   moves is decoration drawn here, and it all stands still for anyone who has asked for less motion. */

/* A SHEET OPENED FROM THE SKY COMES TO THE FRONT (3 October 2026). Adam Deane, after the sparkle beside
   his initials: "What's this in the background". "Your day" opens from inside the sky, and the sky is its
   own stacking layer (isolation, below, so its weather sits behind its words) - so the full-screen sheet
   could rise no higher than the sky itself, and the day card that overlaps the sky was drawn over it.
   While a sheet is open the sky is lifted above everything, the card, the tab bar and Ask included. */
.px-sky:has(.px-sheet) { z-index: 1100; }

.px-sky {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: calc(-1 * (env(safe-area-inset-top, 0px) + 20px)) -20px 0;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 78px;
    min-height: calc(env(safe-area-inset-top, 0px) + 318px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #FFFFFF;
    background: var(--px-sky);
}

/* The sky's colour, top to horizon. White on the lightest of each is 4.5:1 or better. */
.px-sky.is-unknown { --px-sky: var(--px-night) var(--px-contours) right -60px top -30px / 520px auto no-repeat; }
.px-sky.is-clear   { --px-sky: linear-gradient(180deg, #164E9A 0%, #1F60B0 55%, #2B6CBC 100%); }
.px-sky.is-partly  { --px-sky: linear-gradient(180deg, #23507F 0%, #33618E 55%, #46709A 100%); }
.px-sky.is-cloud   { --px-sky: linear-gradient(180deg, #3D4852 0%, #4C5863 55%, #5B6773 100%); }
.px-sky.is-rain    { --px-sky: linear-gradient(180deg, #222C36 0%, #2F3B47 55%, #3D4A57 100%); }
.px-sky.is-storm   { --px-sky: linear-gradient(180deg, #121519 0%, #1F252D 55%, #2E3640 100%); }
.px-sky.is-night   { --px-sky: linear-gradient(180deg, #060B1A 0%, #0F1934 55%, #1B2850 100%); }

/* Pulled down past the top, the glass shows the sky's own colour. */
html:has(.px-sky.is-unknown) { background: #16191C; }
html:has(.px-sky.is-clear) { background: #164E9A; }
html:has(.px-sky.is-partly) { background: #23507F; }
html:has(.px-sky.is-cloud) { background: #3D4852; }
html:has(.px-sky.is-rain) { background: #222C36; }
html:has(.px-sky.is-storm) { background: #121519; }
html:has(.px-sky.is-night) { background: #060B1A; }

.px-sky-layers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.px-sky-layers > span { position: absolute; display: none; }

/* The sun: a warm glow up in the corner, by day in a clear or broken sky. */
.px-sky.is-clear .px-sky-glow,
.px-sky.is-partly .px-sky-glow {
    display: block;
    top: -110px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 170, .95) 0 16%, rgba(255, 214, 102, .42) 30%, rgba(255, 204, 0, 0) 66%);
    animation: px-sky-breathe 9s ease-in-out infinite;
}

/* The moon, and the stars, by night. */
.px-sky.is-night .px-sky-glow {
    display: block;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    right: 32px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #F4F1E6;
    box-shadow: 0 0 36px 12px rgba(244, 241, 230, .22), inset -11px -4px 0 rgba(196, 192, 176, .55);
}

.px-sky.is-night .px-sky-stars {
    display: block;
    inset: 0;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 27% 64%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 43% 16%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.1px 1.1px at 57% 44%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 69% 10%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 81% 56%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 93% 28%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.1px 1.1px at 6% 76%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 35% 86%, #FFFFFF 50%, transparent 51%),
        radial-gradient(1px 1px at 63% 74%, #FFFFFF 50%, transparent 51%);
    animation: px-sky-twinkle 5s ease-in-out infinite alternate;
}

/* Cloud: soft banks drifting across - the odd one in a broken sky, a deck of them under cloud and rain. */
.px-sky-cloud {
    left: -320px;
    width: 240px;
    height: 70px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    filter: blur(16px);
}

.px-sky.is-partly .px-sky-cloud.is-a,
.px-sky.is-partly .px-sky-cloud.is-b,
.px-sky.is-cloud .px-sky-cloud,
.px-sky.is-rain .px-sky-cloud,
.px-sky.is-storm .px-sky-cloud { display: block; }

.px-sky-cloud.is-a { top: 46px; animation: px-sky-drift 70s linear infinite; }
.px-sky-cloud.is-b { top: 132px; width: 320px; opacity: .8; animation: px-sky-drift 96s linear infinite -44s; }
.px-sky-cloud.is-c { top: 210px; width: 200px; opacity: .7; animation: px-sky-drift 62s linear infinite -21s; }

.px-sky.is-rain .px-sky-cloud,
.px-sky.is-storm .px-sky-cloud { background: rgba(196, 206, 216, .3); }

/* Rain: fine streaks falling on a slant, a tile of them moved down and across together. */
.px-sky.is-rain .px-sky-rain,
.px-sky.is-storm .px-sky-rain {
    display: block;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='96'%3E%3Cg stroke='%23ffffff' stroke-opacity='.26' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M8 4l-3 12'/%3E%3Cpath d='M30 30l-3 12'/%3E%3Cpath d='M52 10l-3 12'/%3E%3Cpath d='M18 58l-3 12'/%3E%3Cpath d='M44 70l-3 12'/%3E%3Cpath d='M60 46l-3 12'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 64px 96px;
    animation: px-sky-fall .62s linear infinite;
}

/* A storm: now and then the sky lights up. */
.px-sky.is-storm .px-sky-flash {
    display: block;
    inset: 0;
    background: #FFFFFF;
    opacity: 0;
    animation: px-sky-flash 9s linear infinite;
}

@keyframes px-sky-breathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes px-sky-twinkle { from { opacity: .5; } to { opacity: .95; } }
@keyframes px-sky-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 660px)); } }
@keyframes px-sky-fall { from { background-position: 0 0; } to { background-position: -24px 96px; } }
@keyframes px-sky-flash { 0%, 91%, 100% { opacity: 0; } 92% { opacity: .32; } 93% { opacity: 0; } 94.5% { opacity: .18; } 96% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .px-sky-layers > span { animation: none !important; }
    .px-sky-cloud.is-a { transform: translateX(300px); }
    .px-sky-cloud.is-b { transform: translateX(520px); }
    .px-sky-cloud.is-c { transform: translateX(160px); }
}

/* What sits on the sky: the day, who you are, the greeting, and the reading as its caption. */
.px-sky-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.px-app .px-sky .px-band-date { margin: 0; color: rgba(255, 255, 255, .9); }
.px-sky.is-unknown .px-band-date { color: var(--px-fill); }

/* .px-app on the front: the phone's own heading rule (.px-app h1) is otherwise the stronger, and drew it black. */
.px-app .px-sky-hello {
    margin: 4px 0 0;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #FFFFFF;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .16);
}

.px-sky-now {
    margin-top: auto;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.px-sky-temp {
    font-size: 78px;
    line-height: .86;
    font-weight: 800;
    letter-spacing: -.045em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

.px-sky-temp span { font-size: 42px; vertical-align: top; font-weight: 700; letter-spacing: 0; }

.px-sky-read {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 5px;
}

.px-sky-read strong { font-size: 19px; font-weight: 800; line-height: 1.2; }
.px-sky-read small { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .92); }
.px-sky-where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.px-sky-chip {
    align-self: start;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.px-sky-chip.is-check { background: var(--px-fill); color: var(--px-fill-ink); }

.px-sky-ask {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    color: #FFFFFF;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.px-sky-ask svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* The day's card, laid over the foot of the sky as a job's card is over its map. */
.px-daycard {
    position: relative;
    z-index: 2;
    margin-top: -58px;
    background: var(--px-card);
    border-radius: 26px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -4px 22px rgba(0, 0, 0, .16), 0 1px 2px rgba(0, 0, 0, .06);
}

.px-daycard-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--px-ink);
}

.px-daycard-meta { margin: 0; font-size: 15px; line-height: 1.4; color: var(--px-muted); }
.px-daycard .px-btn { margin-top: 6px; }
/* A job booked at the office (feedback #255): "not on site", where you'll be, said plainly. */
.px-daycard-office { margin: 4px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--px-night); color: var(--px-fill); font-size: 14px; font-weight: 800; line-height: 1.35; }

/* On site, but the phone hasn't said it's at the job: why Record isn't there, and the way to fix it. */
.px-atjob { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.px-atjob .px-hint { margin: 0; flex: 1; }
.px-atjob .px-btn { flex: none; width: auto; }

/* Travel to site, or straight in: the first the bigger, both under the thumb. */
.px-daycard-go { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; margin-top: 6px; }
.px-daycard-go .px-btn { margin-top: 0; }
.px-daycard .px-quick { margin-top: 2px; }

.px-daycard-live { display: inline-flex; align-items: center; gap: 8px; }
.px-daycard-live::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--px-good);
    box-shadow: 0 0 0 4px var(--px-good-soft);
}

.px-daycard-next {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 10px;
    border-radius: 16px;
    background: var(--px-tint);
    color: var(--px-ink);
    text-decoration: none;
}

.px-daycard-next .px-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

/* The weather in full, as a sheet over the day: its own sky colour edge to edge, the close on it. */
.px-wx-sheet { padding: 0; gap: 0; background: transparent; }
.px-wx-sheet > .px-wx { margin: 0; border-radius: 20px 20px 0 0; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); }

.px-app .px-wx-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    margin: 0;
    background: rgba(255, 255, 255, .2);
    color: #FFFFFF;
}

.px-wx-sheet-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* The sky's own icon steps down out from under the close. */
.px-wx-sheet .px-wx-icon { margin-top: 46px; }

/* ---- PHONE ALERTS (3 October 2026): the card that turns the phone's notifications on ---------------- */
.px-pushcard { display: flex; flex-direction: column; gap: 10px; }
.px-pushcard-text .px-meta { margin: 4px 0 0; }
.px-pushcard-act { display: flex; flex-wrap: wrap; gap: 8px; }
.px-pushcard-act .px-btn { width: auto; }
/* The "Turn on" key stays in the page for the script to wire, and out of sight unless it's the thing to
   press: a button's own display would otherwise beat the hidden attribute. */
.px-pushcard-act [hidden] { display: none !important; }
/* On: a slim line, out of the way (feedback #211). */
.px-pushcard.is-on {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1.5px var(--px-good-soft);
}
.px-pushcard.is-on .px-pushcard-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.px-pushcard.is-on .px-meta { display: none; }
.px-pushcard.is-on .px-h3 { font-size: 15px; font-weight: 700; }
.px-pushcard.is-on .px-btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.px-pushcard-dot { flex: none; width: 10px; height: 10px; border-radius: 5px; background: var(--px-good); }

/* ---- A RAP'S POLICY, READ INSIDE THE APP (4 October 2026, feedback #189) ----------------------------------
   "Went nowhere. Froze." The phone was sent to a Word file it could not show and had no way back. The policy now
   opens over the weather - above its sheet, whose sky stands at 1100 - with a back arrow, a big button home, and
   the feedback pencil still to hand at the top. */
.px-policy {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: flex;
    flex-direction: column;
    background: var(--px-ground);
    color: var(--px-ink);
}
.px-policy-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 72px 10px 16px;
    background: var(--px-card);
    border-bottom: 1px solid var(--px-line);
}
.px-policy-head .px-back { margin-left: -8px; border: 0; background: transparent; padding: 0; cursor: pointer; }
.px-policy-head-text { min-width: 0; }
.px-policy-head .px-eyebrow { margin: 0; }
.px-policy-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.px-policy-page { display: block; width: 100%; height: auto; border-radius: 10px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.px-policy-text { background: var(--px-card); border-radius: 16px; padding: 16px 18px; font-size: 17px; line-height: 1.5; }
.px-policy-text h3 { margin: 18px 0 6px; font-size: 19px; font-weight: 800; line-height: 1.25; }
.px-policy-text h3:first-child { margin-top: 0; }
.px-policy-text p { margin: 0 0 10px; }
.px-policy-text p.is-point { position: relative; padding-left: 18px; }
.px-policy-text p.is-point::before { content: "•"; position: absolute; left: 4px; }
.px-policy-text p.is-row { padding: 8px 10px; border-radius: 8px; background: var(--px-tint); font-size: 15px; overflow-wrap: anywhere; }
.px-policy-text p.is-more { margin: 14px 0 0; color: var(--px-muted); font-size: 15px; }
/* A row under a table's headings: each value named by its heading, as a phone's own apps show a record. */
.px-policy-text .is-card {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--px-tint);
}
.px-policy-text .is-card p.is-lead { margin: 0 0 6px; font-size: 16px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.px-policy-text .is-card dl { margin: 0; }
/* dl.is-card: the first cards (4 October 2026, 14:29 build) were the dl itself. */
.px-policy-text dl.is-card,
.px-policy-text .is-card dl { display: flex; flex-direction: column; gap: 6px; }
.px-policy-text dl.is-card > div,
.px-policy-text .is-card dl > div { display: grid; grid-template-columns: minmax(80px, 38%) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.px-policy-text .is-card dt { color: var(--px-muted); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.px-policy-text .is-card dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.px-policy-file { text-align: center; overflow-wrap: anywhere; }
/* A kind of file the phone doesn't read: said plainly, not as a fault. */
.px-reader-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 22px;
    border-radius: 16px;
    background: var(--px-card);
    text-align: center;
}
.px-reader-note p { margin: 0; font-size: 17px; line-height: 1.45; }
.px-reader-note-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: var(--px-tint);
}
.px-reader-note-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--px-ink); stroke-width: 1.8; stroke-linejoin: round; }
.px-policy-foot {
    padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: var(--px-card);
    border-top: 1px solid var(--px-line);
}
.px-app:has(.px-policy) .px-ask-fab { display: none; }
.px-app:has(.px-policy) .feedback-fab.feedback-fab {
    z-index: 1160;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    bottom: auto;
}

/* ---- MESSAGES ON THE PHONE (4 October 2026, feedback #186) -------------------------------------------------
   "Should be able to send pics or files to each other. Message is poorly set out. You can do better." The
   list reads like a phone's own: a face, a name, the last thing said and when, and a count of what's unread.
   The chat: theirs on the left in white, yours on the right in hi-vis, the day between, the box to write in
   pinned at the foot with the camera and the paperclip beside it. */

.px-head .px-back { margin-left: -12px; color: #FFFFFF; }
.px-head-text { flex: 1; min-width: 0; }
.px-head .px-btn-small { flex: none; }

.px-msg-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--px-night);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
}

.px-msg-pick { gap: 10px; }
.px-msg-people { display: flex; flex-direction: column; gap: 6px; }
.px-msg-person {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    border: 1.5px solid var(--px-line);
    border-radius: 14px;
    background: var(--px-card);
    color: var(--px-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.px-msg-person:active { background: var(--px-tint); }
.px-msg-person-text { display: flex; flex-direction: column; min-width: 0; }
.px-msg-person-name { font-size: 17px; font-weight: 700; }
.px-msg-person-role { font-size: 14px; color: var(--px-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.px-msg-list { display: flex; flex-direction: column; background: var(--px-card); border-radius: 18px; overflow: hidden; }
.px-msg-thread {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--px-ink);
    text-decoration: none;
    border-top: 1px solid var(--px-line);
}
.px-msg-thread:first-child { border-top: 0; }
.px-msg-thread:active { background: var(--px-tint); }
.px-msg-thread-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.px-msg-thread-top { display: flex; align-items: baseline; gap: 8px; }
.px-msg-thread-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-msg-thread-time { flex: none; font-size: 13px; color: var(--px-muted); }
.px-msg-thread-preview { font-size: 15px; color: var(--px-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-msg-thread.is-unread .px-msg-thread-preview { color: var(--px-ink); font-weight: 600; }
.px-msg-unread {
    flex: none;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--px-bad);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.px-msg-empty { gap: 4px; }

/* The chat */
.px-chat-head {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: calc(-1 * (env(safe-area-inset-top, 0px) + 20px)) -20px 0;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 20px 10px;
    background: rgba(238, 238, 234, .96);
    border-bottom: 1px solid var(--px-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.px-chat-head .px-msg-avatar { width: 38px; height: 38px; font-size: 13px; }
/* Their own picture, when they have one (feedback #213). */
.px-msg-avatar.has-photo { overflow: hidden; background: var(--px-tint); }
.px-msg-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-chat-head-text { min-width: 0; }
.px-chat-title { font-size: 19px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-chat-head .px-sub { margin: 0; }

.px-chat { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.px-chat-empty { margin: 40px 0; text-align: center; color: var(--px-muted); }
.px-chat-day { display: flex; justify-content: center; margin: 14px 0 6px; }
.px-chat-day span {
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    color: var(--px-muted);
    font-size: 13px;
    font-weight: 700;
}

.px-bubble-row { display: flex; justify-content: flex-start; }
.px-bubble-row.is-mine { justify-content: flex-end; }
.px-bubble {
    max-width: 82%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px 6px;
    border-radius: 18px 18px 18px 6px;
    background: var(--px-card);
    color: var(--px-ink);
    font-size: 17px;
    line-height: 1.35;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
.px-bubble-row.is-mine .px-bubble { background: var(--px-fill); border-radius: 18px 18px 6px 18px; }
.px-bubble-who { font-size: 13px; font-weight: 800; color: var(--px-muted); }
.px-bubble-time { align-self: flex-end; font-size: 12px; color: var(--px-muted); }
.px-bubble-row.is-mine .px-bubble-time { color: rgba(17, 19, 21, .6); }
.px-bubble-withdrawn { color: var(--px-muted); }
.px-bubble .msg-photo { width: min(240px, 100%); margin: 2px -4px 0; }
.px-bubble-row.is-mine .msg-file { background: rgba(255, 255, 255, .5); }

/* ---- DISAPPEARING MESSAGES (4 October 2026, feedback #214) ---------------------------------------------------------- */
.px-bubble.px-bubble-vanish { background: #2A2340; color: #FFFFFF; }
.px-bubble-row.is-mine .px-bubble.px-bubble-vanish { background: #3B2F5C; }
.px-bubble-vanish .px-bubble-time, .px-bubble-row.is-mine .px-bubble-vanish .px-bubble-time { color: rgba(255, 255, 255, .6); }
.px-vanish-line { font-size: 15px; }
.px-vanish-line b { font-weight: 800; color: #D9C8FF; }
.px-vanish-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.px-vanish-open small { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.px-chat-tool.px-chat-vanish { border: 0; background: transparent; padding: 0; }
.px-chat-tool.px-chat-vanish svg { width: 24px; height: 24px; }

/* ---- THE PHOTO SCREEN (4 October 2026, feedback #222): the camera, then words over it and how long it shows -------- */
.px-snap { position: fixed; inset: 0; z-index: 210; background: #000000; color: #FFFFFF; overflow: hidden; }
.px-snap-video, .px-snap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000000; }
.px-snap-video { object-fit: cover; }
.px-snap-video.is-mirrored { transform: scaleX(-1); }
.px-snap-canvas { object-fit: contain; touch-action: none; }
.px-snap-nocam { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 1.45; }
/* No live camera - an iPhone, which would ask every time (feedback #246): a tap anywhere opens the phone's own camera. */
.px-snap-nocam.is-phone { align-content: center; gap: 8px; cursor: pointer; color: #FFFFFF; -webkit-tap-highlight-color: transparent; }
.px-snap-nocam.is-phone strong { font-size: 22px; font-weight: 800; }
.px-snap-nocam.is-phone > span:last-child { color: rgba(255, 255, 255, .7); font-size: 15px; }
.px-snap-lens { width: 96px; height: 96px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--px-fill); color: var(--px-fill-ink); }
.px-snap-nocam.is-phone:active .px-snap-lens { background: var(--px-fill-pressed); }
.px-snap-lens svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-snap-top {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}
.px-snap-round {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    background: rgba(0, 0, 0, .45);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
}
.px-snap-round.is-blank { background: transparent; }
.px-snap-round svg, .px-snap-side svg, .px-snap-send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.px-snap-to { flex: 1; text-align: center; font-size: 16px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* The words box, on the photo itself (feedback #223, #224): the band the words will be drawn in, high enough to stay
   above the keyboard. The script shows it while the words are being written; the rest of the time they are drawn. */
.px-snap-caption {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 34%;
    z-index: 4;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, .55);
    color: #FFFFFF;
    font: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    resize: none;
    overflow: hidden;
    outline: none;
    caret-color: #FFCC00;
    -webkit-appearance: none;
    appearance: none;
}
.px-snap-caption.is-writing { display: block; }
.px-snap-caption:focus, .px-snap-caption:focus-visible { outline: none; box-shadow: none; }
.px-snap-caption.is-card { top: 30%; background: transparent; font-size: 32px; line-height: 42px; font-weight: 800; }
.px-snap-caption::placeholder { color: rgba(255, 255, 255, .75); }
.px-snap-write { font-size: 16px; font-weight: 900; }
.px-snap-hint { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 66px); left: 0; right: 0; z-index: 2; margin: 0; padding: 0 72px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.px-snap-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.px-snap-foot.is-edit { flex-direction: column; gap: 12px; padding: 0 14px; }
.px-snap-shutter {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 6px solid #FFFFFF;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
}
.px-snap-shutter:active { background: rgba(255, 255, 255, .6); }
.px-snap-shutter:disabled { opacity: .35; }
.px-snap-side {
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 16px;
    background: rgba(0, 0, 0, .45);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.px-snap-side svg { width: 26px; height: 26px; }
.px-snap-aa { font-size: 20px; font-weight: 900; }
.px-snap-times { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(0, 0, 0, .5); }
.px-snap-times button {
    min-width: 46px;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 19px;
    background: transparent;
    color: #FFFFFF;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
}
.px-snap-times button.is-on { background: #FFFFFF; color: #111315; }
.px-snap-send {
    align-self: stretch;
    height: 54px;
    border: 0;
    border-radius: 27px;
    background: var(--px-fill);
    color: var(--px-fill-ink);
    font: inherit;
    font-size: 17px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.px-snap-send:disabled { opacity: .5; }
.px-snap-problem { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 150px); z-index: 3; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(176, 0, 32, .9); font-size: 14px; }

/* A PHOTO FROM THE CHAT, OPENED OVER IT (feedback #225): the whole photo on black, the cross top left. */
button.msg-photo { border: 0; padding: 0; background: none; font: inherit; cursor: zoom-in; }
.px-photo-view {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.px-photo-view img { width: 100%; height: 100%; object-fit: contain; display: block; }
.px-photo-view-top {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 12px;
    right: 72px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

/* The feedback pencil drops under the camera's turn-round button rather than sitting on it (outranking the
   chat's own rule, which puts it in that corner). */
.px-app:has(.px-snap) .feedback-fab.feedback-fab.feedback-fab {
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    right: 12px;
    bottom: auto;
}
.px-vanish-view {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #0E0B16;
    color: #FFFFFF;
    text-align: center;
}
.px-vanish-timer { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 16px; right: 16px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.px-vanish-timer span { display: block; height: 100%; background: #FFFFFF; transform-origin: left center; animation-name: px-vanish-run; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes px-vanish-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.px-vanish-body { display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 78vh; overflow: auto; }
.px-vanish-body img { max-width: 100%; max-height: 66vh; border-radius: 14px; object-fit: contain; }
.px-vanish-body p { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.35; white-space: pre-wrap; }
.px-vanish-view small { color: rgba(255, 255, 255, .6); font-size: 13px; }

/* The box to write in, always at the foot of the screen. */
.px-chat-composer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 -20px;
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    background: rgba(238, 238, 234, .97);
    border-top: 1px solid var(--px-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.px-chat-row { display: flex; align-items: flex-end; gap: 6px; }
.px-chat-tool {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--px-ink);
    cursor: pointer;
}
.px-chat-tool:active { background: rgba(0, 0, 0, .08); }
.px-chat-tool svg, .px-chat-send svg, .px-chat-x svg, .px-chat-chip-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.px-chat-tool svg { width: 26px; height: 26px; }
.px-chat-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 140px;
    padding: 10px 14px;
    border: 1.5px solid var(--px-line-strong);
    border-radius: 22px;
    background: var(--px-card);
    color: var(--px-ink);
    font-family: var(--px-font);
    font-size: 17px;
    line-height: 1.3;
    resize: none;
    field-sizing: content;
}
.px-chat-input:focus { outline: none; border-color: var(--px-ink); }
.px-chat-send {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--px-fill);
    color: var(--px-fill-ink);
    cursor: pointer;
}
.px-chat-send:disabled { background: var(--px-off); color: var(--px-off-ink); }
.px-chat-send svg { width: 22px; height: 22px; }

.px-chat-pending { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.px-chat-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 4px 4px 4px 4px;
    border-radius: 12px;
    background: var(--px-card);
    border: 1px solid var(--px-line);
    font-size: 14px;
}
.px-chat-chip img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.px-chat-chip-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.px-chat-chip-icon svg { width: 22px; height: 22px; }
.px-chat-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-chat-chip.is-adding { padding: 10px 12px; color: var(--px-muted); }
.px-chat-x {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--px-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.px-chat-x svg { width: 16px; height: 16px; }
.px-chat-about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border-radius: 12px;
    background: var(--px-soft);
    font-size: 14px;
}
.px-chat-problem { color: var(--px-bad-ink); font-size: 14px; font-weight: 700; }

/* A conversation's foot is the writing box, so the feedback pencil goes to the top corner, by the name. */
.px-app:has(.px-chat-composer) .feedback-fab.feedback-fab {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    bottom: auto;
}

/* The chat fills the screen, so with only a few messages the box still sits at the foot rather than under them. */
.px-main-bare:has(.px-chat-composer) { padding-bottom: 0; min-height: 100dvh; }
.px-main-bare:has(.px-chat-composer) .px-chat { flex: 1; }
/* ---- AN ESTIMATE ON THE PHONE (4 October 2026, feedback #207) ------------------------------------------------
   The figure first, its lines under it, how ArchEx got there folded away; then Preview, Send and "remind me". */
.px-est { gap: 10px; }
.px-app .px-est-kind {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--px-muted);
}
.px-est-total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.px-est-total small { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--px-muted); }
.px-est-lines { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--px-line); }
.px-est-lines li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--px-line);
    font-size: 16px;
    line-height: 1.35;
}
.px-est-lines b { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.px-est-worked summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--px-muted);
    cursor: pointer;
}
.px-est-worked ul { margin: 0 0 4px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--px-muted); }
.px-est-status {
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--px-tint);
    font-size: 15px;
    font-weight: 700;
}
.px-est-status.is-sent { background: var(--px-good-soft); color: var(--px-good-ink); }
.px-est-actions { display: flex; flex-direction: column; gap: 10px; }
.px-est-actions .px-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.px-est-note { text-align: center; }
.px-est-confirm { display: flex; flex-direction: column; gap: 12px; }

/* ---- FIXED FOR YOU (4 October 2026, feedback #208): your note, what was done, and "Have a look". Nothing to approve. */
.px-fix { gap: 8px; }
.px-fix-when { font-size: 13px; font-weight: 700; color: var(--px-muted); }
.px-fix-note {
    margin: 0;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--px-fill);
    font-size: 16px;
    line-height: 1.45;
}
.px-app .px-fix-done-label { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); }
.px-fix-done { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.px-fix .px-btn { margin-top: 6px; }
.px-fix .px-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.px-est-worked summary { list-style: none; }
.px-est-worked summary::-webkit-details-marker { display: none; }
.px-est-worked summary::before {
    content: "";
    width: 8px;
    height: 8px;
    margin: 0 4px 0 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.px-est-worked[open] summary::before { transform: rotate(45deg); }

/* ---- FEEDBACK, THE PHONE'S OWN SHEET (4 October 2026, feedback #196) ------------------------------------------
   Built from the phone's parts, like a message: what it's about, a box to write in at 17px (an iPhone zooms into
   anything smaller), one big Send. */
.px-fb { display: flex; flex-direction: column; gap: 12px; }
.px-fb-about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; line-height: 1.4; color: var(--px-muted); }
.px-fb-chip {
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--px-tint);
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 800;
}
.px-fb-text {
    width: 100%;
    min-height: 150px;
    padding: 14px 16px;
    border: 1.5px solid var(--px-line-strong);
    border-radius: 16px;
    background: var(--px-card);
    color: var(--px-ink);
    font-family: var(--px-font);
    font-size: 17px;
    line-height: 1.45;
    resize: vertical;
}
.px-fb-text:focus { outline: none; border-color: var(--px-ink); box-shadow: 0 0 0 3px rgba(255, 204, 0, .45); }
.px-fb .px-quiet-link { align-self: center; }

/* ---- THE BRIEF, SAID TO YOU (4 October 2026, feedback #205): a greeting by name, "Read it to me" and the voice. */
.px-brief-hello { font-size: 17px; font-weight: 700; line-height: 1.4; }
.px-say-row { display: flex; align-items: center; gap: 8px; }
/* .px-btn is width:100%; in a row it must not push its neighbour off the screen. */
.px-say-row .px-say { flex: 1 1 auto; width: auto; min-width: 0; }
.px-say-row .px-voice { flex: none; }
.px-app .px-fix-section { margin: 10px 2px 0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--px-muted); }
.px-fix.is-looked summary { display: flex; flex-direction: column; gap: 4px; cursor: pointer; list-style: none; }
.px-fix.is-looked summary::-webkit-details-marker { display: none; }
.px-fix-note-short { font-size: 15px; line-height: 1.4; }

/* ---- FROM THE TEAM (4 October 2026, feedback #212): send it to Claude, or not needed. */
.px-team-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.px-team-decided { margin-top: 4px; font-size: 14px; font-weight: 800; color: var(--px-muted); }
.px-team-decided.is-sent { color: var(--px-good-ink); }

/* ---- YOU (4 October 2026, feedback #213, #215): your picture, your cards, Louisa Mode ------------------------------ */
a.px-avatar { text-decoration: none; overflow: hidden; }
.px-avatar-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.px-me { gap: 12px; }
.px-me-top { display: flex; align-items: center; gap: 14px; }
.px-me-face {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 38px;
    object-fit: cover;
    background: var(--px-fill);
    box-shadow: 0 0 0 3px var(--px-card), 0 0 0 5px var(--px-fill);
}
.px-me-face.is-initials { display: flex; align-items: center; justify-content: center; color: var(--px-fill-ink); font-size: 26px; font-weight: 900; }
.px-me-who { min-width: 0; }
.px-me-who .px-meta { overflow-wrap: anywhere; }
.px-me-maker { display: flex; flex-direction: column; gap: 10px; }
.px-me-maker.is-hidden { display: none; }
.px-me-preview { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; align-self: center; border-radius: 50%; background: var(--px-tint); }
.px-me-looks { display: flex; justify-content: center; gap: 8px; }
.px-app .px-me-looks .px-chip { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--px-line-strong); background: var(--px-card); font-size: 15px; font-weight: 800; }
.px-app .px-me-looks .px-chip.is-on { background: var(--px-ink); color: #FFFFFF; border-color: var(--px-ink); }
.px-me-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.px-me-picks .px-btn { width: auto; }

.px-me-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.px-switch {
    flex: none;
    position: relative;
    width: 58px;
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: var(--px-line-strong);
    transition: background .15s ease;
}
.px-switch.is-on { background: var(--px-good); }
.px-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}
.px-switch.is-on .px-switch-knob { transform: translateX(24px); }

.px-me-cards { gap: 10px; }
.px-me-cred { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--px-line); }
.px-me-add { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--px-line); }
.px-app .px-label { font-size: 14px; font-weight: 700; color: var(--px-muted); margin-top: 4px; }
.px-me-out { margin: 4px 0 24px; }
.px-chip.is-bad { background: var(--px-bad-soft); color: var(--px-bad-ink); }
.px-me-cred .px-chip { flex-shrink: 0; }
.px-me-cred-why { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--px-bad-ink); }

/* A row with something new behind it (feedback #217): the dot says where the tab's count is. */
.px-row-new { flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--px-bad); box-shadow: 0 0 0 3px var(--px-bad-soft); }

/* ---- CARDS TO CHECK (4 October 2026, feedback #213): the photo, then it's right / not right ------------------------- */
.px-cardcheck-how { margin: 0 2px 10px; font-size: 15px; line-height: 1.4; color: var(--px-muted); }
.px-cardcheck { gap: 8px; }
.px-cardcheck-photo {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--px-night);
    cursor: zoom-in;
}
.px-cardcheck-photo img { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.px-cardcheck-photo.is-big { cursor: zoom-out; }
.px-cardcheck-photo.is-big img { max-height: none; }
.px-cardcheck-why { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--px-line); }
.px-cardcheck-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.px-app .px-cardcheck-reasons .px-chip { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--px-line-strong); background: var(--px-card); font-size: 15px; font-weight: 800; }
.px-app .px-cardcheck-reasons .px-chip.is-on { background: var(--px-ink); color: #FFFFFF; border-color: var(--px-ink); }

/* AN EMAIL ON THE PHONE (5 October 2026, feedback #228) - PhoneMail.razor. */
.px-mail { display: flex; flex-direction: column; gap: 12px; }
.px-mail-who { margin: 0; display: grid; gap: 4px; font-size: 14px; color: var(--px-muted); }
.px-mail-who div { display: flex; gap: 8px; min-width: 0; }
.px-mail-who dt { flex: none; width: 40px; font-weight: 700; color: var(--px-ink); }
.px-mail-who dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.px-mail-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.5; color: var(--px-ink); }
.px-mail-body.is-earlier { font-size: 15px; color: var(--px-muted); margin-top: 8px; }
.px-mail-earlier summary { font-size: 15px; font-weight: 700; color: var(--px-link); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.px-mail-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--px-line); }
.px-mail-files li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--px-line); font-size: 15px; }
.px-mail-files li span { min-width: 0; overflow-wrap: anywhere; }
.px-mail-files li small { flex: none; color: var(--px-muted); }
.px-mail-files li .px-mail-file-was { display: block; font-size: 12px; }
.px-mail-reply { display: flex; flex-direction: column; gap: 12px; }
.px-mail-reply .px-eyebrow { margin: 0; }
.px-mail-text { min-height: 180px; font-size: 17px; line-height: 1.5; resize: vertical; }
.px-mail-writing { margin: 0; }
.px-mail-answered { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: #E3F1E6; color: #1F5A2E; font-size: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.px-mail-answered .px-link-btn { min-height: 40px; padding: 0 4px; }

/* A DRAFT STARTED BY MISTAKE, SET ASIDE (5 October 2026, feedback #238). Under its entry in "Recording forms in progress". */
.px-draft-aside { align-self: flex-start; min-height: 40px; margin: -2px 0 4px; font-size: 15px; }
.px-draft-aside.is-asking { display: block; align-self: stretch; margin: 0 0 6px; padding: 12px 14px; border-radius: 16px; background: var(--px-card); }
.px-draft-aside.is-asking p { margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: var(--px-ink); }
.px-draft-aside-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- CHECKED IN WITHOUT TOUCHING ANYTHING (7 October 2026, Adam, feedback #307) ---------------------------------------
   The way to it on Today - a hi-vis edged row under the office buttons - and its page: two links, copied with a tap,
   and the Shortcuts steps numbered as the phone shows them. */
.px-auto-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
    padding: 12px 12px 12px 14px;
    border: 2px solid var(--px-fill);
    border-radius: 16px;
    background: var(--px-soft);
    color: var(--px-ink);
    text-decoration: none;
}
.px-auto-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.px-auto-cta-text strong { font-size: 16px; font-weight: 800; line-height: 1.25; }
.px-auto-cta-text small { font-size: 14px; line-height: 1.35; color: var(--px-muted); }
.px-auto-cta .px-chev { color: var(--px-ink); }

.px-auto { gap: 10px; }
.px-auto .px-h2 { display: flex; align-items: center; gap: 10px; }
.px-auto-num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--px-fill);
    color: var(--px-fill-ink);
    font-size: 16px;
    font-weight: 900;
}
.px-auto .px-note b { color: var(--px-ink); }
.px-auto-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.px-auto-link .px-input { font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-overflow: ellipsis; }
.px-app .px-auto-link .px-auto-copy { width: auto; min-width: 92px; margin: 0; padding: 0 16px; }
.px-app .px-auto-link .px-auto-copy[data-px-copied="yes"] { background: var(--px-good); box-shadow: none; color: #FFFFFF; font-size: 0; }
.px-auto-copy[data-px-copied="yes"]::after { content: "Copied"; font-size: 16px; }
.px-app .px-auto-link .px-auto-copy[data-px-copied="no"] { font-size: 0; }
.px-auto-copy[data-px-copied="no"]::after { content: "Hold the box"; font-size: 13px; }
.px-auto-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.px-auto-steps li::marker { font-weight: 800; }
.px-auto-steps b { font-weight: 800; }

/* ---- OLD MAILBOX (7 October 2026) - every email off the old host: the address, a count in big figures with a hi-vis bar
   while it copies, and each folder's tally once it's done. */
.px-om { gap: 10px; }
.px-om-address { margin: 0; font-size: 14px; font-weight: 700; color: var(--px-muted); overflow-wrap: anywhere; }
.px-om-count { margin: 0; font-size: 16px; color: var(--px-ink); }
.px-om-count b { font-size: 28px; font-weight: 900; letter-spacing: -.01em; }
.px-om-bar { height: 12px; border-radius: 999px; background: var(--px-soft); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.px-om-bar span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--px-fill); transition: width .6s ease; }
.px-om-folders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.px-om-folders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--px-line, rgba(0, 0, 0, .08)); font-size: 15px; }
.px-om-folders li:first-child { border-top: 0; }
.px-om-folders li span { overflow-wrap: anywhere; }
.px-om-folders li b { font-variant-numeric: tabular-nums; }
.px-om-folders li small { grid-column: 1 / -1; font-size: 13px; }
.px-om .is-warn { color: var(--px-warn-ink); font-weight: 700; }
.px-om-failed summary, .px-om-server summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--px-muted); padding: 4px 0; }
.px-om-failed ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--px-muted); }
.px-om-server { display: flex; flex-direction: column; gap: 6px; }
.px-om-server[open] summary { margin-bottom: 4px; }
.px-om-where { overflow-wrap: anywhere; }
.px-app .px-om-read { text-align: center; text-decoration: none; }

/* The lock (7 October 2026, Adam: "make it that i can not enter it without the 2FC authentictor"): one box for the
   six-digit code, big enough to type on a phone; once open, a quiet line with when it locks and a way to lock it now. */
.px-om-lock { gap: 10px; }
.px-om-lock-form { display: flex; flex-direction: column; gap: 8px; }
.px-om-code { font-size: 24px; font-weight: 800; letter-spacing: .18em; text-align: center; font-variant-numeric: tabular-nums; }
.px-om-lockbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 13px; color: var(--px-muted); }
.px-om-lockbar .px-quiet-link { font-size: 13px; }

/* Reading it: one search box, the folders as chips that scroll sideways, a row per email, one email as text. */
.px-om-find { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.px-om-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.px-om-chips::-webkit-scrollbar { display: none; }
.px-om-chip { flex: none; white-space: nowrap; }
.px-om-chip b { margin-left: 4px; font-weight: 900; font-variant-numeric: tabular-nums; opacity: .7; }
.px-om-chip.is-chosen { background: var(--px-fill); color: var(--px-fill-ink); }
.px-om-chip.is-chosen b { opacity: 1; }
.px-om-list { gap: 0; }
.px-om-list > .px-meta { margin: 0 0 4px; }
.px-om-row { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-top: 1px solid var(--px-line, rgba(0, 0, 0, .08)); color: var(--px-ink); text-decoration: none; min-width: 0; }
.px-om-row-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.px-om-row-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.px-om-row-top time { flex: none; font-size: 13px; color: var(--px-muted); font-variant-numeric: tabular-nums; }
.px-om-row-subject { font-size: 14px; color: var(--px-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-om-row small { font-size: 12px; color: var(--px-muted); }
.px-om-row.is-unread b { font-weight: 900; }
.px-om-row.is-unread .px-om-row-subject { color: var(--px-ink); }
.px-om-list .px-btn { margin-top: 10px; }
.px-om-email { gap: 12px; }
.px-om-email .px-h2 { overflow-wrap: anywhere; }
.px-om-heads { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.px-om-heads dt { color: var(--px-muted); font-weight: 700; }
.px-om-heads dd { margin: 0; overflow-wrap: anywhere; }
.px-om-attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.px-om-attachments li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.px-om-attachments a { color: var(--px-link); font-weight: 700; overflow-wrap: anywhere; }
.px-om-attachments small { flex: none; color: var(--px-muted); }
.px-om-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; color: var(--px-ink); padding-top: 12px; border-top: 1px solid var(--px-line, rgba(0, 0, 0, .08)); }
.px-om-eml { align-self: flex-start; }
button.px-om-chip { border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ---- YOUR ICON THROUGH THE DAY (7 October 2026, Adam, #323) - a row per part of the day: its icon, what it's for, change. */
.px-me-day { gap: 4px; }
.px-me-day > .px-note { margin-bottom: 6px; }
.px-me-day-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--px-line, rgba(0, 0, 0, .08)); }
.px-me-day-icon { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--px-soft); font-size: 28px; line-height: 1; }
.px-me-day-icon.is-empty { font-size: 18px; color: var(--px-muted); }
.px-me-day-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-me-day-words strong { font-size: 16px; font-weight: 800; }
.px-me-day-words small { font-size: 13px; color: var(--px-muted); }

/* ---- YOUR BIRTHDAY (7 October 2026, Adam, #318) - day, month and (if you like) the year in one row; whether the team is
   told under it. */
.px-me-bday { gap: 10px; }
.px-me-bday-pick { display: grid; grid-template-columns: 1fr 2fr 1.3fr; gap: 8px; }
.px-me-bday-pick .px-input { min-width: 0; }
.px-me-bday-team { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--px-ink); }
.px-me-bday-team input { width: 22px; height: 22px; accent-color: var(--px-fill); flex: none; }

/* ---- THE SIGN-IN REGISTER (7 October 2026, Adam, #312) - a day to a heading, a row per sign-in; wrong tries in the warning
   colour, the day's first visits quieter. */
.px-si-list { gap: 0; }
.px-si-day { margin: 14px 0 2px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--px-muted); }
.px-si-day:first-child { margin-top: 0; }
.px-si-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--px-line, rgba(0, 0, 0, .08)); min-width: 0; }
.px-si-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.px-si-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; }
.px-si-top time { flex: none; font-size: 13px; color: var(--px-muted); font-variant-numeric: tabular-nums; }
.px-si-what { font-size: 14px; color: var(--px-ink); }
.px-si-row small { font-size: 12px; color: var(--px-muted); overflow-wrap: anywhere; }
.px-si-row.is-visit .px-si-what { color: var(--px-muted); }
.px-si-row.is-problem { box-shadow: inset 4px 0 0 var(--px-warn-ink); padding-left: 12px; }
.px-si-row.is-problem .px-si-what { color: var(--px-warn-ink); font-weight: 800; }
.px-si-list .px-btn { margin-top: 10px; }

/* ---- SOLITAIRE, THREE WAYS (7 October 2026, Adam, feedback #302) - Draw 1, Draw 3 or Vegas, chosen over the table before
   a deal: one segmented row, the chosen one hi-vis. */
.px-sol-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
}
.px-sol-modes[hidden] { display: none; }
.px-app .px-sol-modes .px-sol-mode {
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .78);
    font-family: var(--px-font);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.px-app .px-sol-modes .px-sol-mode.is-chosen { background: var(--px-fill); color: var(--px-fill-ink); }

/* ---- MAHJONG'S LEVELS (7 October 2026, Adam, feedback #301) - the level to play, stepped through on the card. */
.px-mj-levels {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
}
.px-mj-levels[hidden] { display: none; }
.px-app .px-mj-levels .px-mj-step {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    cursor: pointer;
}
.px-app .px-mj-levels .px-mj-step:disabled { opacity: .28; cursor: default; }
.px-mj-step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.px-mj-level { display: grid; gap: 1px; min-width: 0; text-align: center; }
.px-mj-level strong { color: var(--px-fill); font-size: 16px; font-weight: 900; }
.px-mj-level span { color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.35; }