/* =========================================================
   WOOMOO design tokens
   Black and white, thin rounded lines, no accent colour.
   Bootstrap 5.3 is used for plumbing only (grid, forms, offcanvas, modal, toast);
   everything that makes it look like WOOMOO is in this one file and driven by the
   custom properties below. No Sass, no build step.

   Font: Atkinson Hyperlegible, self-hosted - a free, very legible face in the spirit of
   GOV.UK's body text. (GOV.UK's own font is licensed for government services only.)
   Size: 18px on phones, 19px from tablet up (GOV.UK is 16/19) with a 1.4 line height.
   Form fields are always 16px or more, otherwise iOS Safari zooms in when one is focused.
   ========================================================= */

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

:root,
[data-bs-theme="light"] {
    --woo-bg: #ffffff;
    --woo-fg: #000000;
    --woo-fg-soft: #262626;         /* hover state of a solid black button */
    --woo-muted: #505a5f;           /* secondary text - 7:1 on white */
    --woo-line: #e3e5e6;            /* hairlines between rows */
    --woo-line-strong: #b1b4b6;     /* borders of inputs, buttons, cards */
    --woo-surface: #f6f6f6;         /* hover / quiet fills */
    --woo-danger: #ca3535;          /* errors and delete only - the one colour allowed */
    --woo-on-danger: #ffffff;
    --woo-solid-edge: #000000;      /* the outline round every SOLID pill - change this one value to try another (e.g. #595959 for grey) */
}

[data-bs-theme="dark"] {
    --woo-bg: #000000;
    --woo-fg: #ffffff;
    --woo-fg-soft: #e0e0e0;
    --woo-muted: #a6aeb3;
    --woo-line: #25292b;
    --woo-line-strong: #4d5457;
    --woo-surface: #101112;
    --woo-danger: #ff7a6e;
    --woo-on-danger: #000000;
    --woo-solid-edge: #9aa3a8;      /* black would vanish on a black page, so a light grey here */
}

/* ---- Map the tokens onto Bootstrap's variables ---- */
:root {
    --bs-body-font-family: "Atkinson Hyperlegible", Arial, "Helvetica Neue", sans-serif;
    --bs-body-font-size: 1.125rem;
    --bs-body-line-height: 1.4;
    --bs-border-width: 1px;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
    --bs-border-radius-pill: 999px;
    --woo-column: 640px;
    --woo-sidenav: min(var(--woo-sidenav-w, 260px), 40vw);
}

@media (min-width: 768px) {
    :root {
        --bs-body-font-size: 1.1875rem;
    }
}

[data-bs-theme="light"] {
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: #000000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-link-color: #000000;
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color: #000000;
    --bs-link-hover-color-rgb: 0, 0, 0;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #000000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: #ffffff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-link-color: #ffffff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

[data-bs-theme] {
    --bs-border-color: var(--woo-line-strong);
    --bs-secondary-color: var(--woo-muted);
    --bs-tertiary-bg: var(--woo-surface);
    --bs-emphasis-color: var(--woo-fg);
}

body {
    background: var(--woo-bg);
    color: var(--woo-fg);
    -webkit-text-size-adjust: 100%;
    overflow-wrap: break-word;
}

/* Links are always underlined (they have no colour to set them apart); navigation links opt out. */
a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* ---- Focus: a clear 3px ring in the text colour. With no accent colour, this matters more. ---- */
:focus-visible {
    outline: 3px solid var(--woo-fg);
    outline-offset: 2px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:focus-visible {
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--woo-fg);
}

.woo-skip {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 2000;
    background: var(--woo-bg);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--woo-fg);
}

/* =========================================================
   Layout - one centred feed column, slim left nav on desktop,
   top bar + bottom tab bar on a phone.
   ========================================================= */

.woo-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.woo-sidenav {
    width: var(--woo-sidenav);
    flex: none;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--woo-line);
    overflow-y: auto;
}

/* The handle on the left menu's right edge: no width of its own (so the page doesn't shift), a wider strip to grab, and a line that shows when pointed at */
.woo-sidenav-grip {
    flex: none;
    position: sticky;
    top: 0;
    width: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 20;
    touch-action: none;
    outline: none;
    display: none;
}

@media (min-width: 768px) {
    .woo-sidenav-grip {
        display: block;
    }
}

.woo-sidenav-grip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 10px;
    cursor: col-resize;
}

.woo-sidenav-grip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 3px;
    background: transparent;
    pointer-events: none;
}

.woo-sidenav-grip:hover::after,
.woo-sidenav-grip:focus-visible::after,
.woo-resizing .woo-sidenav-grip::after {
    background: var(--woo-muted);
}

html.woo-resizing,
html.woo-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Nothing to drag while the menu is icons only */
html[data-nav="rail"] .woo-sidenav-grip {
    display: none;
}

.woo-brand {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.25rem 1rem 0.75rem;
}

.woo-brand:hover {
    text-decoration: none;
}

/* The logo picture: two copies (dark ink / light ink); the one that suits the theme is shown. */
.woo-brand--logo {
    display: block;
    line-height: 0;
}

.woo-logo {
    display: block;
}

[data-bs-theme="dark"] .woo-logo--light,
[data-bs-theme="light"] .woo-logo--dark {
    display: none;
}

/* Left navigation: the full logo with its strapline */
.woo-sidenav .woo-brand--logo {
    padding: 0.25rem 1rem 1rem;
}

.woo-sidenav .woo-logo {
    width: 100%;
    max-width: 190px;
    height: auto;
}

/* Phone top bar: the full logo; it shrinks a little on very narrow screens so the buttons beside it always fit */
.woo-topbar .woo-logo {
    width: 200px;
    max-width: 55vw;
    height: auto;
}

.woo-sidelink {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    color: var(--woo-fg);
    text-decoration: none;
    font-size: 1.05rem;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.woo-sidelink:hover {
    background: var(--woo-surface);
    text-decoration: none;
}

.woo-sidelink[aria-current="page"] {
    font-weight: 700;
}

/* Pots in the left nav: the link, a chevron to open the list, and the list of pots */
.woo-sidesplit {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.woo-sidesplit .woo-sidelink {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.woo-sidetoggle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--woo-muted);
}

.woo-sidetoggle:hover {
    background: var(--woo-surface);
    color: var(--woo-fg);
}

.woo-sidetoggle .woo-icon {
    transition: transform 0.15s ease;
}

.woo-sidetoggle.collapsed .woo-icon {
    transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
    .woo-sidetoggle .woo-icon {
        transition: none;
    }
}

.woo-sublist {
    list-style: none;
    margin: 0.1rem 0 0.4rem;
    padding: 0 0 0 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.woo-sublink {
    display: block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    color: var(--woo-fg);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.woo-sublink:hover {
    background: var(--woo-surface);
    text-decoration: none;
}

.woo-sublink[aria-current="page"] {
    font-weight: 700;
}

/* A pot in the left menu that has sections: its link with a small chevron beside it, then its sections (one step further in for each level inside another) */
.woo-subsplit {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.woo-subsplit .woo-sublink {
    flex: 1 1 auto;
    min-width: 0;
}

.woo-sidetoggle--sub {
    width: 32px;
    height: 32px;
}

.woo-sublist--sections {
    margin: 0 0 0.3rem;
    padding-left: 0.9rem;
}

.woo-sublink--section {
    padding-left: calc(0.9rem + var(--woo-depth, 0) * 0.9rem);
    font-size: 0.9rem;
}

.woo-subempty {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    color: var(--woo-muted);
}

.woo-sidenav-spacer {
    flex: 1 1 auto;
}

/* Left menu as icons only (tablet and desktop). <html data-nav="rail"> is set before first paint from the browser's own memory
   (see the head script in _Layout and section 5 of site.js). The words stay in the page, just hidden from the eye, so each
   icon still has its name for a screen reader; site.js adds a tooltip. */
.woo-nav-icon {
    display: inline-flex;
}

.woo-mark,
.woo-nav-icon.woo-nav-icon--open {
    display: none;
}

html[data-nav="rail"] {
    --woo-sidenav: 76px;
}

html[data-nav="rail"] .woo-sidenav {
    padding: 1.25rem 0.5rem;
    align-items: center;
    overflow-x: hidden;
}

html[data-nav="rail"] .woo-sidenav .woo-logo {
    display: none;
}

html[data-nav="rail"] .woo-sidenav .woo-brand--logo {
    padding: 0.25rem 0 1rem;
}

html[data-nav="rail"] .woo-sidenav .woo-mark {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

html[data-nav="rail"] .woo-sidelabel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html[data-nav="rail"] .woo-sidenav .woo-sidelink {
    position: relative;
    justify-content: center;
    width: 48px;
    padding: 0.5rem;
}

html[data-nav="rail"] .woo-sidenav .woo-sidelink[aria-current="page"] {
    background: var(--woo-surface);
}

/* The pots list needs room, so it stays out of the narrow menu; the Pots icon goes to the full page. */
html[data-nav="rail"] .woo-sidesplit {
    display: block;
}

html[data-nav="rail"] .woo-sidetoggle,
html[data-nav="rail"] .woo-sidegroup .collapse {
    display: none;
}

/* The number sits on the top right corner of its icon (the bell, To sort). The menu clips anything outside it, so it stays inside the button. */
html[data-nav="rail"] .woo-sidenav .woo-sidelink .woo-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
}

html[data-nav="rail"] .woo-sidenav .btn-primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
}

html[data-nav="rail"] .woo-nav-icon.woo-nav-icon--close {
    display: none;
}

html[data-nav="rail"] .woo-nav-icon.woo-nav-icon--open {
    display: inline-flex;
}

.woo-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.woo-column {
    width: 100%;
    max-width: var(--woo-column);
    padding: 1rem 1rem calc(6.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
    .woo-column {
        border-left: 1px solid var(--woo-line);
        border-right: 1px solid var(--woo-line);
        padding: 1.5rem 1.5rem 4rem;
    }

    .woo-main {
        justify-content: flex-start;
        padding-left: 0;
    }
}

/* Top bar (phone only) */
.woo-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(0.4rem + env(safe-area-inset-top)) 1rem 0.4rem;
    background: var(--woo-bg);
    border-bottom: 1px solid var(--woo-line);
}

/* Phone only: the logo is bigger than the 200px it was (up to 300px) and sits in the middle of the top bar. Signed in, the theme
   button stays at the right; the logo is centred on the screen and may run a little into the empty margins either side, but
   never as far as the button's icon (so on a narrower phone it is smaller: about 263px at 375px wide, 300px from 430px).
   Signed out, the theme button is at the left as it is signed in; Sign in (when there is one - not on the home page or the Sign in
   page, woo-topbar--lean) has a row of its own underneath, centred. */
@media (max-width: 767.98px) {
    .woo-topbar {
        display: grid;
        grid-template-columns: 2.75rem 1fr 2.75rem;
        align-items: center;
    }

    .woo-topbar .woo-brand--logo {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .woo-topbar .woo-logo {
        width: min(300px, calc(100vw - 7rem));
        max-width: none;
    }

    .woo-topbar > :last-child {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        position: relative;
        z-index: 1;
    }

    .woo-topbar:not(.d-md-none):not(.woo-topbar--lean) {
        row-gap: 0.25rem;
    }

    /* Signed out: the box holding the theme button and Sign in steps aside, so each can be placed on the grid itself. */
    .woo-topbar-actions {
        display: contents !important; /* beats Bootstrap's d-flex on the same box */
    }

    .woo-topbar-actions [data-theme-toggle] {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        position: relative;
        z-index: 1;
    }

    .woo-topbar-actions > a {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }
}

/* Bottom tab bar (phone only, signed in) */
.woo-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* six equal columns: pile, pots, calendar, Find, settings, + */
    justify-items: center;
    align-items: end;
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
    background: var(--woo-bg);
    border-top: 1px solid var(--woo-line);
}

.woo-navlink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 0;
    min-height: 52px;
    padding: 0.4rem 0.25rem;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--woo-muted);
    text-decoration: none;
    border-radius: 12px;
}

.woo-navlink:hover {
    text-decoration: none;
    color: var(--woo-fg);
}

.woo-navlink[aria-current="page"] {
    color: var(--woo-fg);
    font-weight: 700;
}

/* The number on the Pile button: a small pill over the top right of the icon (its colours are the person's "to sort" pile pill) */
.woo-navicon {
    position: relative;
    display: inline-flex;
}

/* (two classes, so it wins over the plain .woo-badge sizes further down) */
.woo-badge.woo-navcount {
    position: absolute;
    top: -0.45rem;
    left: 62%;
}

/* The pile's number on the phone's bottom bar and on the left menu's Pile link: the same size as the bell's number (.woo-bell-count), a round
   pill (a single digit is a circle, two or more stretch it). The line height leaves room for the 1px border, so the height is 1.15rem. */
.woo-badge.woo-navcount,
.woo-badge.woo-sidecount {
    min-width: 1.15rem;
    padding: 0 0.3rem;
    font-size: 0.7rem;
    line-height: calc(1.15rem - 2px);
    text-align: center;
}

.woo-badge.woo-navcount[hidden] {
    display: none;
}

/* BottomBar:ShowLabels = false in appsettings: no words, so the icons are larger and each button is a bigger target */
.woo-bottomnav--icons .woo-navlink {
    justify-content: center;
    min-height: 58px;
    padding: 0.5rem 0.25rem;
}

.woo-bottomnav--icons .woo-navlink .woo-icon {
    width: 1.9rem;
    height: 1.9rem;
}

.woo-bottomnav--icons .woo-fab {
    width: 60px;
    height: 60px;
}

.woo-bottomnav--icons .woo-fab .woo-icon {
    width: 1.9rem;
    height: 1.9rem;
}

.woo-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 0.3rem;
    border-radius: 50%;
    background: var(--woo-fg);
    color: var(--woo-bg);
    text-decoration: none;
}

.woo-fab:hover {
    color: var(--woo-bg);
    text-decoration: none;
}

.woo-fab .woo-icon {
    width: 1.7rem;
    height: 1.7rem;
    stroke-width: 2;
}

/* Calendar: the agenda - a month heading, then each day with its things under it */
.woo-agenda-month {
    margin: 1.5rem 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--woo-fg);
}

.woo-agenda-month:first-child {
    margin-top: 0.25rem;
}

.woo-agenda-heading {
    margin: 1rem 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
}

/* In the agenda the day is the quieter heading (the month above it is the strong one) */
.woo-agenda .woo-agenda-heading {
    color: var(--woo-muted);
}

/* The pot a thing is in, small above its row (the row has its own top padding, so this tucks into it) */
.woo-agenda-pot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.55rem 0 -0.4rem;
    font-size: 0.78rem;
    color: var(--woo-muted);
}

.woo-agenda-pot .woo-icon {
    width: 0.95em;
    height: 0.95em;
}

/* The names in it are links, but they read as the quiet label until pointed at */
.woo-agenda-pot a {
    color: inherit;
    text-decoration: none;
}

.woo-agenda-pot a:hover,
.woo-agenda-pot a:focus-visible {
    color: var(--woo-link, inherit);
    text-decoration: underline;
}

/* Calendar: the layout switch (Agenda / Grid) sits level with the heading */
.woo-cal-views {
    margin-top: 0.3rem;
}

/* Calendar: the month grid. Phone: a number and up to three dots per day. Wider: the first two titles. */
.woo-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.woo-cal-month {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.woo-cal-next .woo-icon {
    transform: scaleX(-1); /* the left chevron, turned round */
}

.woo-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--woo-line);
    border-left: 1px solid var(--woo-line);
}

.woo-cal-dow {
    padding: 0.3rem 0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--woo-muted);
    border-right: 1px solid var(--woo-line);
    border-bottom: 1px solid var(--woo-line);
}

.woo-cal-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
    min-height: 3.4rem;
    padding: 0.25rem 0.15rem;
    border-right: 1px solid var(--woo-line);
    border-bottom: 1px solid var(--woo-line);
}

.woo-cal-cell.is-out {
    background: var(--woo-surface);
    color: var(--woo-muted);
}

.woo-cal-num {
    min-width: 1.5rem;
    font-size: 0.85rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 999px;
}

.woo-cal-cell.is-today .woo-cal-num {
    background: var(--woo-fg);
    color: var(--woo-bg);
    font-weight: 700;
}

.woo-cal-cell.is-selected {
    box-shadow: inset 0 0 0 2px var(--woo-fg);
}

.woo-cal-dots {
    display: flex;
    gap: 3px;
}

.woo-cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--woo-fg);
}

.woo-cal-dot.is-done {
    background: none;
    box-shadow: inset 0 0 0 1px var(--woo-muted);
}

.woo-cal-evs {
    display: none;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.woo-cal-ev {
    display: block;
    padding: 0 0.25rem;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--woo-surface);
    border: 1px solid var(--woo-line);
    border-radius: 4px;
}

.woo-cal-ev.is-done {
    color: var(--woo-muted);
    text-decoration: line-through;
}

/* A date that has only been offered ("Set date: ...", not yet accepted or declined): hollow and dashed instead of solid */
.woo-cal-dot.is-offered {
    background: none;
    box-shadow: none;
    border: 1px dashed var(--woo-fg);
}

.woo-cal-ev.is-offered {
    background: none;
    color: var(--woo-muted);
    border-style: dashed;
    border-color: var(--woo-line-strong);
}

.woo-cal-more {
    font-size: 0.7rem;
    color: var(--woo-muted);
}

/* A day with things on it: the whole square is the link */
.woo-cal-link {
    position: absolute;
    inset: 0;
}

.woo-cal-link:focus-visible {
    outline: 2px solid var(--woo-fg);
    outline-offset: -2px;
}

@media (min-width: 576px) {
    .woo-cal-cell {
        align-items: stretch;
        min-height: 5.5rem;
        padding: 0.25rem;
    }

    .woo-cal-num {
        align-self: flex-start;
    }

    .woo-cal-dots {
        display: none;
    }

    .woo-cal-evs {
        display: flex;
    }
}

/* =========================================================
   Icons (Lucide sprite) - thin line, follow the text colour
   ========================================================= */

.woo-icon {
    width: 1.35em;
    height: 1.35em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.25em;
}

/* Theme toggle shows one icon, chosen by the current preference (set on <html> by site.js) */
.woo-theme-icon {
    display: none;
}

html[data-theme-pref="system"] .woo-theme-icon--system,
html[data-theme-pref="light"] .woo-theme-icon--light,
html[data-theme-pref="dark"] .woo-theme-icon--dark {
    display: inline-block;
}

/* =========================================================
   Typography and small pieces
   ========================================================= */

.woo-h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.25rem 0 1rem;
}

.woo-h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
}

.woo-muted {
    color: var(--woo-muted);
}

.woo-small {
    font-size: 0.875rem;
}

.woo-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.woo-btn-wide {
    width: 100%;
}

.woo-auth {
    max-width: 420px;
    margin: 1rem auto 0;
}

.woo-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--woo-muted);
    font-size: 0.9rem;
}

.woo-divider::before,
.woo-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--woo-line);
}

.woo-alert {
    border: 1px solid var(--woo-line-strong);
    border-left: 4px solid var(--woo-fg);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.woo-alert:empty {
    display: none;
}

.woo-alert--error {
    border-left-color: var(--woo-danger);
}

.woo-alert--warn {
    border-left-color: #b68735;
}

.woo-flash {
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.woo-field-error {
    display: block;
    color: var(--woo-danger);
    font-weight: 700;
    margin-top: 0.25rem;
}

.woo-field-error:empty {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.woo-badge {
    display: inline-block;
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--woo-muted);
    white-space: nowrap;
}

.woo-empty {
    color: var(--woo-muted);
    text-align: center;
    padding: 2.5rem 1rem;
    margin: 0;
}

/* Home page: someone is asking to join one of your pots - a big card with Accept / Decline */
.woo-requests {
    margin-bottom: 1rem;
}

.woo-request {
    border: 2px solid var(--woo-fg);
    border-radius: 16px;
    padding: 1.1rem 1.1rem 1rem;
    margin-bottom: 0.75rem;
}

.woo-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.woo-request-actions form {
    flex: 1;
}

/* "Later" sits on its own line under Accept / Decline as a quiet link-style button */
.woo-request-actions .woo-request-later {
    flex-basis: 100%;
}

/* A badge you can press (the people count opens the list of people). Raised above a card's stretched link. */
.woo-badge--button {
    position: relative;
    z-index: 1;
    cursor: pointer;
    text-decoration: none;
}

.woo-badge--button:hover {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
    text-decoration: none;
}

/* A badge that needs noticing (e.g. "2 waiting to join") */
.woo-badge--alert {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
    font-weight: 700;
}

/* ...and when that badge is a link (the owner's pot page), keep its colours on hover */
a.woo-badge--alert,
a.woo-badge--alert:hover {
    color: var(--woo-bg);
    text-decoration: none;
}

/* A pill that is switched on (the "n things" pill on a pot's page while it shows only your own things) */
a.woo-badge--selected,
a.woo-badge--selected:hover {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
    font-weight: 700;
    text-decoration: none;
}

/* A wrapper that only exists to carry htmx attributes: its children lay out as if it were not there */
.woo-contents {
    display: contents;
}

/* Home page "getting started" links for a brand-new account - hidden as soon as the pile has a row in it */
.woo-start {
    margin-top: 1.5rem;
}

/* "Getting started" with its X on the right */
.woo-start-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 1.75rem 0 0.75rem;
}

.woo-start-head .woo-h2 {
    margin: 0;
}

.woo-start-head .woo-iconbtn {
    margin: -0.5rem -0.5rem -0.5rem 0;
}

.woo-start-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.woo-start-card .woo-icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
}

.woo-start-card small {
    display: block;
    margin-top: 0.15rem;
    color: var(--woo-muted);
}

/* Small icons written into the words (the three who-can-see icons on Create a new pot) */
.woo-start-card small .woo-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
}

/* Phone only: the getting-started cards sit at the bottom of the screen, just above the bottom bar, where a thumb reaches them.
   The page becomes exactly one screen tall (top bar + content) and the section takes the free space above it. */
@media (max-width: 767.98px) {
    body:has(.woo-start) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }

    body:has(.woo-start) .woo-app {
        flex: 1 1 auto;
        min-height: 0;
    }

    .woo-column:has(.woo-start) {
        display: flex;
        flex-direction: column;
    }

    .woo-column:has(.woo-start) .woo-start {
        margin-top: auto;
        padding-top: 1.5rem;
    }
}

body:has(.woo-list .woo-row) .woo-start {
    display: none;
}

/* Hide the "nothing here yet" message as soon as the list has a row in it. */
.woo-list:has(.woo-row) > .woo-empty {
    display: none;
}

/* =========================================================
   Buttons, fields, checks
   ========================================================= */

.btn {
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 700;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    --bs-btn-color: var(--woo-bg);
    --bs-btn-bg: var(--woo-fg);
    --bs-btn-border-color: var(--woo-fg);
    --bs-btn-hover-color: var(--woo-bg);
    --bs-btn-hover-bg: var(--woo-fg-soft);
    --bs-btn-hover-border-color: var(--woo-fg-soft);
    --bs-btn-active-color: var(--woo-bg);
    --bs-btn-active-bg: var(--woo-fg-soft);
    --bs-btn-active-border-color: var(--woo-fg-soft);
    --bs-btn-disabled-color: var(--woo-bg);
    --bs-btn-disabled-bg: var(--woo-muted);
    --bs-btn-disabled-border-color: var(--woo-muted);
}

.btn-outline-secondary {
    --bs-btn-color: var(--woo-fg);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--woo-line-strong);
    --bs-btn-hover-color: var(--woo-fg);
    --bs-btn-hover-bg: var(--woo-surface);
    --bs-btn-hover-border-color: var(--woo-fg);
    --bs-btn-active-color: var(--woo-fg);
    --bs-btn-active-bg: var(--woo-surface);
    --bs-btn-active-border-color: var(--woo-fg);
}

.btn-danger {
    --bs-btn-color: var(--woo-on-danger);
    --bs-btn-bg: var(--woo-danger);
    --bs-btn-border-color: var(--woo-danger);
    --bs-btn-hover-color: var(--woo-on-danger);
    --bs-btn-hover-bg: var(--woo-danger);
    --bs-btn-hover-border-color: var(--woo-danger);
    --bs-btn-active-color: var(--woo-on-danger);
    --bs-btn-active-bg: var(--woo-danger);
    --bs-btn-active-border-color: var(--woo-danger);
}

.btn-sm {
    min-height: 40px;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.9rem;
    --bs-btn-font-size: 0.95rem;
}

.woo-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--woo-muted);
    text-decoration: none;
    font-size: 0.95rem;
}

.woo-iconbtn:hover {
    background: var(--woo-surface);
    color: var(--woo-fg);
    text-decoration: none;
}

.form-label {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* A group heading (a <legend> such as "Who can see it?") is the same size as the other field labels, not the browser's larger legend size. */
legend.form-label {
    font-size: 1rem;
}

.form-text {
    color: var(--woo-muted);
    font-size: 0.95rem;
    margin-top: 0;
    margin-bottom: 0.4rem;
}

.form-control,
.form-select {
    --bs-border-color: var(--woo-line-strong);
    min-height: 48px;
    font-size: 1rem;
    background-color: var(--woo-bg);
    color: var(--woo-fg);
    border-color: var(--woo-line-strong);
}

/* The role dropdowns on a pot's Settings page: all the same width so the owner's (greyed out) one lines up with the rest */
.woo-role-select {
    width: 8.5rem;   /* wide enough for "Contributor" plus the dropdown arrow */
}

.form-control::placeholder {
    color: var(--woo-muted);
    opacity: 1;
}

/* A file chooser (the Add sheet, and a thing's Documents and Photos): its button fills the whole height of the box. The box is taller than Bootstrap expects (min-height above),
   so without this the button stops short and leaves a gap underneath. */
input[type="file"].form-control {
    padding: 0 0.75rem 0 0;
    line-height: 46px;
    overflow: hidden;
}

input[type="file"].form-control::file-selector-button {
    margin: 0 0.75rem 0 0;
    padding: 0 0.75rem;
    height: 100%;
    line-height: inherit;
}

textarea.form-control {
    min-height: 6rem;
}

.form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0.15em;
    background-color: var(--woo-bg);
    border-color: var(--woo-line-strong);
}

.form-check-input:checked {
    background-color: var(--woo-fg);
    border-color: var(--woo-fg);
}

/* Bootstrap's tick is white - on a white (dark-mode) fill it would vanish, so use a black one there. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
}

.form-check-label {
    padding-left: 0.25rem;
}

/* A bordered, tappable choice (radio / checkbox with a title and a description) */
.woo-choice {
    display: block;
    border: 1px solid var(--woo-line-strong);
    border-radius: 12px;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
}

.woo-choice .form-check-input {
    float: left;
    margin-left: -1.75rem;
}

.woo-choice:has(input:checked) {
    border-color: var(--woo-fg);
    box-shadow: inset 0 0 0 1px var(--woo-fg);
}

.woo-choice-title {
    font-weight: 700;
    display: block;
}

.woo-choice-desc {
    color: var(--woo-muted);
    font-size: 0.95rem;
    display: block;
}

/* A card hidden by the quick filters (display:block above would otherwise win over [hidden]) */
.woo-choice[hidden] {
    display: none;
}

/* The Add sheet's Where step: the ticked pots sit at the top (data-pot-pinned), the rest of the list folds away behind a button (data-pot-toggle). */
[data-pot-rest][hidden],
[data-pot-toggle][hidden] {
    display: none;
}

/* "Add to new pot": the same card as a pot, which opens to show the name and who-can-see-it choices when ticked */
.woo-newpot {
    cursor: default;
}

.woo-newpot-head {
    display: block;
    margin: 0;
    cursor: pointer;
}

.woo-newpot-fields {
    display: none;
    margin-top: 0.75rem;
}

.woo-newpot:has(.woo-newpot-toggle:checked) .woo-newpot-fields {
    display: block;
}

/* The radios inside would otherwise light the whole card up even when it is not ticked */
.woo-newpot:not(:has(.woo-newpot-toggle:checked)) {
    border-color: var(--woo-line-strong);
    box-shadow: none;
}

.woo-newpot-fields fieldset.mb-4 {
    margin-bottom: 0.25rem !important;
}

/* =========================================================
   The feed: capture box and hairline rows (borderless, divided by thin lines, like x.com)
   ========================================================= */

.woo-capture {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.woo-capture .form-control {
    flex: 1 1 auto;
    border-radius: 999px;
    padding-left: 1.1rem;
}

/* Find: the form wraps (the list of what to look for has a row to itself), so the box starts from nothing and grows - the button stays beside it */
.woo-capture.flex-wrap .form-control {
    flex: 1 1 0;
    min-width: 0;
}

.woo-capture .btn {
    flex: none;
    padding-left: 1rem;
    padding-right: 1rem;
}

.woo-list {
    border-top: 1px solid var(--woo-line);
}

.woo-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--woo-line);
}

/* On the calendar, a thing whose date is only an offer: a dashed outline round the row, like the "Set date" chip inside it */
.woo-row.is-offered {
    margin: 0.3rem 0;
    padding: 0.55rem 0.6rem;
    border: 1px dashed var(--woo-line-strong);
    border-radius: 12px;
}

/* A badge that is also a button (the Done toggle, the like). Looks like a pill, reacts like one. */
.woo-badge--toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.55;
    min-height: calc(0.78rem * 1.55 + 2px); /* one line of text plus the border, so icon-only pills match the text ones */
    cursor: pointer;
}

.woo-badge--toggle:hover {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
}

.woo-badge--toggle .woo-icon {
    width: 0.95em;
    height: 0.95em;
}

/* A pill with an icon in it that is not a button (read-only "tick 2 of 3") */
.woo-badge--static {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.woo-badge--static .woo-icon {
    width: 0.95em;
    height: 0.95em;
}

/* An icon-only pill (private / shared / public) has no line of text to give it a height: match the other pills (1.55 lines + the 2px border) */
.woo-badge--static[role="img"],
.woo-badge--static.woo-badge--button {
    min-height: calc(1.55em + 2px);
}

/* The link's site (e.g. ents24.com) shown as a pill */
.woo-badge--link {
    text-decoration: none;
}

.woo-badge--link:hover {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
    text-decoration: none;
}

.woo-row.is-done .woo-donepill {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
}

.woo-row.is-done .woo-row-title {
    color: var(--woo-muted);
    text-decoration: line-through;
}

.woo-row-main {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.45rem;
}

.woo-row-title {
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.woo-row-title a {
    text-decoration: none;
}

.woo-row-title a:hover {
    text-decoration: underline;
}

.woo-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.6rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--woo-muted);
}

/* Right-hand column of a row: the preview picture with the "..." button underneath it */
.woo-row-side {
    flex: none;
    width: 56px; /* same width as the picture, so the "..." lines up down the page with or without one */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The link's preview picture (Open Graph image) */
.woo-row-thumb {
    flex: none;
    width: 56px;
    height: 56px;
    margin-top: 0.35rem;
    border-radius: 10px;
    border: 1px solid var(--woo-line);
    background: var(--woo-surface);
    object-fit: cover;
}

/* ...as a link (opens the thing's sheet): the box is just the picture, with no stray line height under it */
.woo-row-thumblink {
    flex: none;
    display: block;
    line-height: 0;
}

.woo-detail-image {
    display: block;
    width: 100%;
    max-height: 220px;
    margin-bottom: 1rem;
    border-radius: 12px;
    border: 1px solid var(--woo-line);
    background: var(--woo-surface);
    object-fit: cover;
}

/* Tags (your own, the "2 going, 1 maybe" summary, other people's) wear a soft violet so they stand out from the grey pills for
   type, date and place. Dark text on a pale fill in light mode, pale text on a deep fill in dark mode: both clear 4.5:1.
   --mark is the older name, still used on the people sheet. */
.woo-badge--mark,
.woo-badge--tag,
.woo-pick--tag,
.woo-pick--others {
    --woo-tag-bg: #ece9ff;
    --woo-tag-line: #7b6be0;
    --woo-tag-fg: #3a2c9c;
    --woo-tag-bg-hover: #dcd6ff;
    background: var(--woo-tag-bg);
    border-color: var(--woo-tag-line);
    color: var(--woo-tag-fg);
}

[data-bs-theme="dark"] .woo-badge--mark,
[data-bs-theme="dark"] .woo-badge--tag,
[data-bs-theme="dark"] .woo-pick--tag,
[data-bs-theme="dark"] .woo-pick--others {
    --woo-tag-bg: #2b2457;
    --woo-tag-line: #8f82f0;
    --woo-tag-fg: #dcd7ff;
    --woo-tag-bg-hover: #3a3172;
}

a.woo-badge--tag:hover,
a.woo-badge--mark:hover {
    background: var(--woo-tag-bg-hover);
    border-color: var(--woo-tag-fg);
    color: var(--woo-tag-fg);
}

/* YOUR OWN tags on a thing are the violet turned inside out (solid, light text), so they stand out from the summary and other
   people's tags, which stay pale. Hover keeps the colours. */
.woo-badge--tag.woo-badge--mine,
a.woo-badge--tag.woo-badge--mine:hover {
    background: var(--woo-tag-fg);
    border-color: var(--woo-solid-edge);
    color: var(--woo-tag-bg);
}

/* The tag pill on a row: the tag icon, then (optionally) "2 going, 1 maybe" */
.woo-badge--tagicon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    /* An icon-only pill has no line of text to give it a height: match the other pills (1.55 lines + the 2px border). */
    min-height: calc(1.55em + 2px);
}

.woo-badge--tagicon .woo-icon {
    flex: none;
    width: 0.95em;
    height: 0.95em;
}

/* The tag choices in a pot's tag sheet: pills you press to switch a tag on or off. They wear the colours of the pills they make -
   teal for your own, blue for the shared ones (see the blocks below, which also give these their colours). Pressed = solid + a tick. */
.woo-pick {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.15rem 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
}

/* The tag buttons on a thing's tag sheet (--tag, your tag colour) and the People sheet's switches (--others, other people's tag colour): the
   violet above unless the person chose another colour, then pale; hovered a little deeper; switched on = solid with a tick. */
.woo-pick--tag,
.woo-pick--others {
    background: var(--woo-tag-bg);
    border-color: var(--woo-tag-line);
    color: var(--woo-tag-fg);
}

.woo-pick--tag:hover,
.woo-pick--others:hover {
    background: var(--woo-tag-bg-hover);
    border-color: var(--woo-tag-fg);
}

.woo-pick--tag[aria-pressed="true"],
.woo-pick--tag[aria-pressed="true"]:hover,
.woo-pick--others[aria-pressed="true"],
.woo-pick--others[aria-pressed="true"]:hover {
    background: var(--woo-tag-fg);
    border-color: var(--woo-tag-fg);
    color: var(--woo-tag-bg);
    font-weight: 700;
}

/* Choices about the pot itself (the People sheet's "The people in it") wear the plain grey of the pills on the pot, not a tag colour:
   hovered a little darker; chosen = solid with a tick. */
.woo-pick--pot {
    background: transparent;
    border-color: var(--woo-line-strong);
    color: var(--woo-muted);
}

.woo-pick--pot:hover {
    border-color: var(--woo-fg);
    color: var(--woo-fg);
}

.woo-pick--pot[aria-pressed="true"],
.woo-pick--pot[aria-pressed="true"]:hover {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
    font-weight: 700;
}

/* Tags on a pot (not on a thing) wear teal, so the two types can be told apart at a glance. Same recipe as the violet above. */
.woo-badge--potag,
.woo-pick--mine {
    --woo-potag-bg: #def5f0;
    --woo-potag-line: #2a9d8a;
    --woo-potag-fg: #0b4f44;
    --woo-potag-bg-hover: #c8ede6;
    background: var(--woo-potag-bg);
    border-color: var(--woo-potag-line);
    color: var(--woo-potag-fg);
}

[data-bs-theme="dark"] .woo-badge--potag,
[data-bs-theme="dark"] .woo-pick--mine {
    --woo-potag-bg: #0f3a34;
    --woo-potag-line: #3fb5a3;
    --woo-potag-fg: #c2f3ea;
    --woo-potag-bg-hover: #17504a;
}

a.woo-badge--potag:hover {
    background: var(--woo-potag-bg-hover);
    border-color: var(--woo-potag-fg);
    color: var(--woo-potag-fg);
}

/* ...and the one that is switched on as a filter on the pots list goes solid, like the other switched-on pills */
a.woo-badge--potag.woo-badge--selected,
a.woo-badge--potag.woo-badge--selected:hover {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
}

.woo-pick--mine:hover {
    background: var(--woo-potag-bg-hover);
    border-color: var(--woo-potag-fg);
}

.woo-pick--mine[aria-pressed="true"],
.woo-pick--mine[aria-pressed="true"]:hover {
    background: var(--woo-potag-fg);
    border-color: var(--woo-potag-fg);
    color: var(--woo-potag-bg);
    font-weight: 700;
}

/* Tags the owner or an admin puts on a pot for EVERYONE in it wear blue, so they are easy to tell from your own teal ones */
.woo-badge--shared,
.woo-pick--shared {
    --woo-shared-bg: #e5f0ff;
    --woo-shared-line: #4179c8;
    --woo-shared-fg: #123668;
    --woo-shared-bg-hover: #cce1ff;
    background: var(--woo-shared-bg);
    border-color: var(--woo-shared-line);
    color: var(--woo-shared-fg);
}

[data-bs-theme="dark"] .woo-badge--shared,
[data-bs-theme="dark"] .woo-pick--shared {
    --woo-shared-bg: #1c2f4a;
    --woo-shared-line: #6c9ee5;
    --woo-shared-fg: #d1e4ff;
    --woo-shared-bg-hover: #264064;
}

a.woo-badge--shared:hover {
    background: var(--woo-shared-bg-hover);
    border-color: var(--woo-shared-fg);
    color: var(--woo-shared-fg);
}

a.woo-badge--shared.woo-badge--selected,
a.woo-badge--shared.woo-badge--selected:hover {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
}

.woo-pick--shared:hover {
    background: var(--woo-shared-bg-hover);
    border-color: var(--woo-shared-fg);
}

.woo-pick--shared[aria-pressed="true"],
.woo-pick--shared[aria-pressed="true"]:hover {
    background: var(--woo-shared-fg);
    border-color: var(--woo-shared-fg);
    color: var(--woo-shared-bg);
    font-weight: 700;
}

/* "Set date: Thu 3 Dec 2026" - a date found in the page, waiting for the owner to accept it */
.woo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px dashed var(--woo-line-strong);
    border-radius: 999px;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--woo-fg);
    text-decoration: none;
}

.woo-chip:hover {
    border-style: solid;
    text-decoration: none;
}

.woo-chip .woo-icon {
    width: 1em;
    height: 1em;
}

/* A location pill / chip: the text is cut short with "..." instead of pushing the row wider than the screen */
.woo-badge--place,
.woo-badge--clip,
.woo-chip--place {
    max-width: 100%;
    min-width: 0;
}

.woo-badge--place > span,
.woo-badge--clip > span,
.woo-chip--place > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The offer inside the details sheet */
.woo-offer {
    border: 1px solid var(--woo-line-strong);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.woo-offer-text {
    margin-bottom: 0.6rem;
}

/* Edit form: when "All day" is ticked the time boxes have nothing to say, so they step aside. */
.woo-datefields:has(input[type="checkbox"]:checked) .woo-timefield {
    display: none;
}

.woo-row-actions {
    flex: none;
    display: flex;
    align-items: center;
}

/* Reactions (a heart, a thumbs up...): the pills a thing, a pot or a comment wears. The wrapper takes no space of its own, so its pills
   sit in the row of pills beside it. Yours is outlined darker. */
.woo-react {
    display: contents;
}

.woo-reaction {
    gap: 0.25rem;
}

.woo-reaction.is-mine {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
}

.woo-reaction-add[aria-expanded="true"] {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
}

/* Under a pot's name and under a comment, the pills get a line of their own */
.woo-react-line,
.woo-comment-react {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

/* Ratings: the pill on a row, and the sheet where you give yours. Black and white like everything else; yours has the darker outline. */
.woo-ratingpill {
    gap: 0.25rem;
}

.woo-ratingpill.is-mine {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
}

.woo-star-solid .woo-icon {
    fill: currentColor;
}

.woo-ratingcount {
    color: var(--woo-muted);
}

.woo-ratingchoice {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

/* The row of stars in the sheet. Each star is the picture with one button over each half (or one over the whole star): the buttons are
   invisible, the picture shows what you have given. */
.woo-stars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.woo-star {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--woo-fg);
}

.woo-star-art,
.woo-star-fill {
    position: absolute;
    inset: 0;
}

.woo-star-art > .woo-icon {
    width: 100%;
    height: 100%;
    color: var(--woo-line-strong);
}

.woo-star-fill {
    display: none;
}

.woo-star-fill .woo-icon {
    width: 100%;
    height: 100%;
    color: var(--woo-fg);
    fill: currentColor;
}

.woo-star.is-full .woo-star-fill {
    display: block;
}

.woo-star.is-half .woo-star-fill {
    display: block;
    clip-path: inset(0 50% 0 0);
}

.woo-star-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
}

.woo-star-hit--left {
    width: 50%;
}

.woo-star-hit--right {
    left: auto;
    right: 0;
    width: 50%;
}

.woo-star-hit button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.woo-star-hit button:focus-visible {
    outline: 3px solid var(--woo-fg);
    outline-offset: -2px;
    border-radius: 6px;
}

/* A number out of 10, or a short list of choices (thumbs...): a row of pills that wrap. */
.woo-rate-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.woo-rate-form {
    margin: 0;
}

.woo-rate-num {
    justify-content: center;
    min-width: 2.4rem;
    min-height: 2.4rem;
    font-size: 1rem;
}

.woo-rate-choice {
    min-height: 2.4rem;
    padding: 0 0.9rem;
    font-size: 0.95rem;
}

.woo-rate-num.is-mine,
.woo-rate-choice.is-mine {
    color: var(--woo-fg);
    border-color: var(--woo-fg);
    border-width: 2px;
}

.woo-rate-mine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.woo-raters {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woo-rater {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-rater.is-me {
    font-weight: 600;
}

/* A collection card in the list of collections */
.woo-card {
    display: block;
    border: 1px solid var(--woo-line-strong);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
    color: var(--woo-fg);
    text-decoration: none;
}

.woo-card:hover {
    text-decoration: none;
    border-color: var(--woo-fg);
}

/* A pot the person has given a colour (Tag sheet, Colour): an edge on its card, and beside its name on its own page. PillPalette.AccentStyle sets
   --pot-accent (light) and --pot-accent-d (dark). */
.woo-accent,
.woo-card.woo-accent:hover {
    border-left: 6px solid var(--pot-accent);
}

[data-bs-theme="dark"] .woo-accent,
[data-bs-theme="dark"] .woo-card.woo-accent:hover {
    border-left-color: var(--pot-accent-d);
}

.woo-accent-title {
    border-left: 6px solid var(--pot-accent);
    padding-left: 0.6rem;
}

[data-bs-theme="dark"] .woo-accent-title {
    border-left-color: var(--pot-accent-d);
}

/* The little round sample beside the Colour list on the Tag sheet. */
.woo-pot-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid var(--woo-line-strong);
    background: var(--pot-accent, transparent);
}

[data-bs-theme="dark"] .woo-pot-swatch {
    background: var(--pot-accent-d, transparent);
}

/* A collection you've asked to join but aren't in yet - dashed and not clickable */
.woo-card--waiting {
    border-style: dashed;
    color: var(--woo-muted);
}

.woo-card-title {
    font-weight: 700;
    font-size: 1.1rem;
}

/* A collection card on the Pots page. The title link is stretched over the whole card so a tap anywhere opens it;
   the share / settings / + buttons are raised above that, in the top right. */
.woo-card--pot {
    position: relative;
}

.woo-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.woo-card-head .woo-card-title {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.woo-card-link,
.woo-card-link:hover {
    color: inherit;
    text-decoration: none;
}

.woo-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.woo-card-link:focus-visible::after {
    outline: 2px solid var(--woo-fg);
    outline-offset: 2px;
}

.woo-card-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex: none;
    margin: -0.4rem -0.5rem -0.4rem 0;
}

/* A pot's description under its name on the Pots page: the same size as the name (.woo-card-title), but grey and not bold */
.woo-card-desc {
    margin-top: 0.1rem;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--woo-muted);
    overflow-wrap: anywhere;
}

.woo-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.woo-page-head .woo-h1 {
    margin-bottom: 0.25rem;
}

/* A pot's own page: the icons in a row of their own (pushed to the right), the name on a full row under them */
.woo-page-head--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* The description under the name on the Pile and a pot's own page: a little closer to the name above and the pills below */
.woo-page-desc {
    margin-top: -0.5rem;
    margin-bottom: 0.4rem;
}

/* On a pot's own page the icons are the last thing in the heading, so the description needs no pulling up */
.woo-page-head--stacked + .woo-page-desc {
    margin-top: 0;
}

/* Pots page: the Private / Shared / Public quick filters sit beside the New button, wrapping under the heading on a narrow phone */
.woo-page-head--filters {
    flex-wrap: wrap;
}

.woo-page-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

.woo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Pots page: the join and "+" icons together */
.woo-page-icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Pots page on a phone: the heading and the two icons share the top row (icons at the right), and the filters take their own
   row underneath, centred. .woo-page-actions steps out of the way (display: contents) so its children line up with the heading. */
@media (max-width: 767.98px) {
    .woo-page-head--pots {
        align-items: center;
    }

    .woo-page-head--pots .woo-h1 {
        order: 1;
        margin-bottom: 0;
    }

    .woo-page-head--pots .woo-page-actions {
        display: contents;
    }

    .woo-page-head--pots .woo-page-icons {
        order: 2;
        margin-left: auto;
    }

    .woo-page-head--pots .woo-filters {
        order: 3;
        flex: 0 0 100%;
        justify-content: center;
    }
}

.woo-filter {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 0.8rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    color: var(--woo-fg);
    font-size: 0.9rem;
    text-decoration: none;
}

.woo-filter:hover {
    background: var(--woo-surface);
    text-decoration: none;
}

button.woo-filter {
    background: none;
    cursor: pointer;
    font-family: inherit;
}

.woo-filter[aria-current="true"],
.woo-filter[aria-pressed="true"] {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
    font-weight: 700;
}

/* =========================================================
   Offcanvas + modal shells
   Desktop: a panel sliding in from the right. Phone: a sheet rising from the bottom.
   ========================================================= */

.woo-offcanvas {
    --bs-offcanvas-width: min(460px, 100vw);
    --bs-offcanvas-bg: var(--woo-bg);
    --bs-offcanvas-color: var(--woo-fg);
    --bs-offcanvas-border-color: var(--woo-line-strong);
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
    --bs-offcanvas-box-shadow: none;
}

@media (max-width: 767.98px) {
    .offcanvas.woo-offcanvas {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: 92vh;
        max-height: 92dvh;
        border-left: 0;
        border-top: 1px solid var(--woo-line-strong);
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
    }

    .offcanvas.woo-offcanvas.showing,
    .offcanvas.woo-offcanvas.show:not(.hiding) {
        transform: none;
    }
}

.woo-shell-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

.woo-shell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--woo-line);
}

.woo-shell-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.woo-shell-body {
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}

/* On a full page the head/body are just part of the column, and there's nothing to close. */
.woo-main .woo-shell-head {
    padding-left: 0;
    padding-right: 0;
}

.woo-main .woo-shell-body {
    padding-left: 0;
    padding-right: 0;
}

.woo-main [data-shell-close] {
    display: none;
}

.modal {
    --bs-modal-bg: var(--woo-bg);
    --bs-modal-color: var(--woo-fg);
    --bs-modal-border-color: var(--woo-line-strong);
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 15px;
    --bs-modal-box-shadow: none;
}

.btn-close {
    --bs-btn-close-opacity: 0.7;
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Toast */
.toast-container {
    position: fixed;
    left: 0;
    right: 0;
    width: auto; /* Bootstrap makes this box only as wide as the toast, which pinned it to the left edge */
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    z-index: 2100;
    pointer-events: none;
}

@media (min-width: 768px) {
    .toast-container {
        bottom: 1.5rem;
    }
}

.woo-toast {
    --bs-toast-bg: var(--woo-fg);
    --bs-toast-color: var(--woo-bg);
    --bs-toast-border-width: 0;
    --bs-toast-border-radius: 999px;
    --bs-toast-padding-x: 1.25rem;
    --bs-toast-padding-y: 0.6rem;
    --bs-toast-box-shadow: none;
    width: auto;
    max-width: 90vw;
    pointer-events: auto;
}

/* =========================================================
   Admin tables and small data displays
   ========================================================= */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--woo-fg);
    --bs-table-border-color: var(--woo-line);
    --bs-table-striped-bg: var(--woo-surface);
    --bs-table-hover-bg: var(--woo-surface);
    font-size: 0.95rem;
}

.table > :not(caption) > * > * {
    padding: 0.6rem 0.5rem;
}

.table th {
    font-weight: 700;
    white-space: nowrap;
}

/* The icons-and-pills grid in Settings (Appearance): fixed columns so it fits a phone without sideways scrolling. */
.woo-potlist-grid {
    table-layout: fixed;
    width: 100%;
    font-size: 0.9rem;
}

.woo-potlist-grid > :not(caption) > * > * {
    padding: 0.45rem 0.2rem;
}

.woo-potlist-grid th {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* An icon row starts with the icon itself, as it looks on the card. */
.woo-potlist-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.woo-potlist-ico {
    flex: none;
    display: inline-flex;
}

.woo-potlist-grid thead th {
    font-size: 0.8rem;
    vertical-align: bottom;
}

.woo-potlist-grid thead th:first-child {
    width: 34%;
}

@media (min-width: 576px) {
    .woo-potlist-grid thead th:first-child {
        width: 40%;
    }

    .woo-potlist-grid {
        font-size: 0.95rem;
    }
}

.woo-token {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    border: 1px solid var(--woo-fg);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    overflow-wrap: anywhere;
    user-select: all;
}

.woo-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1rem;
}

.woo-kv dt {
    color: var(--woo-muted);
    font-weight: 400;
}

.woo-kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.woo-note {
    color: var(--woo-muted);
    font-size: 0.95rem;
}

details.woo-details > summary {
    cursor: pointer;
    color: var(--woo-muted);
}

pre.woo-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.85rem;
    border: 1px solid var(--woo-line);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    margin: 0.4rem 0 0;
}

/* Admin pages hold wide tables, so they get a wider column than the feed. */
.woo-column:has(.woo-wide) {
    max-width: 1000px;
}

.woo-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--woo-line);
}

.woo-admin-nav a {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--woo-muted);
}

.woo-admin-nav a:hover {
    background: var(--woo-surface);
    color: var(--woo-fg);
}

.woo-admin-nav a[aria-current="page"] {
    color: var(--woo-fg);
    font-weight: 700;
    border: 1px solid var(--woo-line-strong);
}

/* Notifications: the bell (phone top bar) with its unread count, and the rows in the notifications sheet */
.woo-bell {
    position: relative;
}

.woo-bell-count {
    position: absolute;
    top: 4px;
    right: 0;
    min-width: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--woo-fg);
    color: var(--woo-bg);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

/* The top bar is a three-column grid on a phone: the theme button takes the left-hand column, and the bell (the last child)
   takes the right-hand one through the ".woo-topbar > :last-child" rule above */
@media (max-width: 767.98px) {
    .woo-topbar > [data-theme-toggle] {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        position: relative;
        z-index: 1;
    }
}

a.woo-notice {
    color: inherit;
    text-decoration: none;
}

a.woo-notice:hover {
    background: var(--woo-surface);
    text-decoration: none;
}

/* Unread: bold, with a dot in front */
.woo-notice--unread::before {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: var(--woo-fg);
}

.woo-notice--unread .woo-row-title {
    font-weight: 700;
}

/* The pile's "n things to sort" pill: solid green when there is nothing to sort, solid red when there is. White text on both
   clears 4.5:1, and the words say the same thing as the colour. */
.woo-badge--good,
.woo-badge--bad {
    color: #fff;
    font-weight: 700;
}

.woo-badge--good {
    background: #1a7f37;
    border-color: var(--woo-solid-edge);
}

.woo-badge--bad {
    background: #c62828;
    border-color: var(--woo-solid-edge);
}

/* The two pile pills carry a second class (--tosort-ok / --tosort-todo) so a person's own colour for them (Settings, Appearance) can be
   applied without touching the green "New" pills, which share --good. They are not bold ("New" still is). */
.woo-badge--tosort-ok,
.woo-badge--tosort-todo {
    font-weight: 400;
}

/* Settings, Tags: one row per tag of your own - the tag and where it is used, then rename with an X beside it (which asks "are you sure?"
   in a sheet, so nothing is deleted by one stray tap). */
.woo-tagrow {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-tagrow-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Settings, Plan: one row per limit, with a bar for how much of it is used. The bar is a hairline track with a fill in the text colour;
   a full one turns the error colour. */
.woo-planrow {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-planrow-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.woo-meter {
    height: 0.5rem;
    margin-top: 0.4rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    background: var(--woo-bg);
    overflow: hidden;
}

.woo-meter > span {
    display: block;
    height: 100%;
    background: var(--woo-fg);
}

.woo-meter--full > span {
    background: var(--woo-danger);
}

/* Settings, Appearance, Pill colours: each colour choice is a pill drawn in that colour (PillPalette.ChipStyle sets the --sw-* values),
   so it is its own preview. The Soft / Solid choice above the colours redraws them (:has). The real radio buttons are visually
   hidden but still work with the keyboard; a tick and a ring show which one is picked. */
.woo-colourset {
    margin-bottom: 1.25rem;
}

.woo-colours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.woo-colour {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.woo-colour .woo-badge {
    padding: 0.1rem 0.85rem;
    font-size: 0.85rem;
}

.woo-colour-chip {
    background: var(--sw-bg);
    border-color: var(--sw-line);
    color: var(--sw-fg);
}

[data-bs-theme="dark"] .woo-colour-chip {
    background: var(--sw-bg-d);
    border-color: var(--sw-line-d);
    color: var(--sw-fg-d);
}

.woo-colourset:has(.woo-style-solid input:checked) .woo-colour-chip {
    background: var(--sw-sbg);
    border-color: var(--sw-sline);
    color: var(--sw-sfg);
}

[data-bs-theme="dark"] .woo-colourset:has(.woo-style-solid input:checked) .woo-colour-chip {
    background: var(--sw-sbg-d);
    border-color: var(--sw-sline-d);
    color: var(--sw-sfg-d);
}

.woo-colourset:has(.woo-style-outline input:checked) .woo-colour-chip {
    background: var(--sw-obg);
    border-color: var(--sw-oline);
    color: var(--sw-ofg);
}

[data-bs-theme="dark"] .woo-colourset:has(.woo-style-outline input:checked) .woo-colour-chip {
    background: var(--sw-obg-d);
    border-color: var(--sw-oline-d);
    color: var(--sw-ofg-d);
}

/* The colour drop-down, with a preview pill beside it (site.js redraws the pill when another colour is picked). */
.woo-colour-pick {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.woo-colour-preview {
    padding: 0.1rem 0.85rem;
    font-size: 0.85rem;
}

/* The drop-down, the Soft / Solid / Outline choice and the "Example:" pill share one line (wrapping on a narrow screen). */
.woo-colour-pick .woo-colours {
    margin-top: 0;
}

.woo-colour-example {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.woo-colour-example-label {
    color: var(--woo-muted);
    font-size: 0.85rem;
}

/* the Soft / Solid / Outline choice itself is a plain pill */
.woo-stylechip {
    background: transparent;
    border-color: var(--woo-line-strong);
    color: var(--woo-fg);
}

.woo-colour:hover .woo-badge {
    box-shadow: 0 0 0 2px var(--woo-line-strong);
}

.woo-colour input:checked + .woo-badge {
    box-shadow: 0 0 0 2px var(--woo-bg), 0 0 0 4px var(--woo-fg);
}

.woo-colour input:focus-visible + .woo-badge {
    outline: 3px solid var(--woo-fg);
    outline-offset: 4px;
}

/* Comments and pot chat ----------------------------------------------------------------------------------------------------------- */
.woo-comment-compose {
    margin-bottom: 0.25rem;
}

.woo-comment-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid var(--woo-line-strong);
    background: var(--woo-surface);
    font-size: 0.9rem;
    color: var(--woo-muted);
}

.woo-comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.4rem;
}

.woo-comment-actions form {
    display: inline;
    margin: 0;
}

.woo-comment-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--woo-muted);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.woo-comment-link:hover {
    color: var(--woo-fg);
}

.woo-comment-link--danger:hover {
    color: var(--woo-danger);
}

.woo-mention-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.woo-mention-chip {
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    background: none;
    color: var(--woo-muted);
    font-size: 0.85rem;
}

.woo-mention-chip:hover {
    background: var(--woo-surface);
    color: var(--woo-fg);
}

.woo-comment {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-comment--reply {
    margin-left: 1.1rem;
    padding-left: 0.8rem;
    border-left: 2px solid var(--woo-line-strong);
    border-bottom-color: transparent;
}

.woo-comment-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.woo-comment-author {
    font-weight: 700;
}

.woo-comment-time {
    color: var(--woo-muted);
    font-size: 0.85rem;
}

.woo-comment-body {
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.woo-comment-quote {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.15rem;
    color: var(--woo-muted);
    font-size: 0.85rem;
}

.woo-comment-quote .woo-icon {
    flex: none;
    margin-top: 0.15rem;
}

.woo-comment-removed {
    color: var(--woo-muted);
    font-style: italic;
}

.woo-mention {
    font-weight: 700;
}

/* New to you: a bar down the side */
.woo-comment.is-new {
    box-shadow: inset 3px 0 0 var(--woo-fg);
    padding-left: 0.7rem;
}

.woo-comment--reply.is-new {
    box-shadow: none;
    border-left-color: var(--woo-fg);
}

/* The comment pill on a row and the chat icon on a pot: a dot on the corner when someone else has written since you looked */
.woo-commentpill.has-unread,
.woo-chatbtn.has-unread {
    position: relative;
}

.woo-commentpill.has-unread::after,
.woo-chatbtn.has-unread::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--woo-fg);
    box-shadow: 0 0 0 2px var(--woo-bg);
}

.woo-commentpill.has-unread::after {
    top: -3px;
    right: -3px;
}

/* Polls ------------------------------------------------------------------------------------------------------------------------------ */
/* The Polls icon on a pot: a dot on the corner when a poll someone else started is waiting for your pick (same dot as the chat icon). */
.woo-pollbtn.has-unread {
    position: relative;
}

.woo-pollbtn.has-unread::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--woo-fg);
    box-shadow: 0 0 0 2px var(--woo-bg);
}

.woo-poll {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-poll.needs-vote {
    box-shadow: inset 3px 0 0 var(--woo-fg);
    padding-left: 0.8rem;
}

.woo-poll-question {
    margin: 0 0 0.15rem;
    font-size: 1.1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.woo-poll-meta {
    margin: 0 0 0.5rem;
}

.woo-poll-prompt {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.woo-poll-options {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.woo-poll-option {
    padding: 0.3rem 0;
}

.woo-poll-pick {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.woo-poll-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.2rem 0.4rem;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--woo-fg);
    text-align: left;
    cursor: pointer;
}

.woo-poll-btn:hover {
    background: var(--woo-surface);
}

.woo-poll-btn:focus-visible {
    outline: 3px solid var(--woo-fg);
    outline-offset: 2px;
}

/* The round marker beside a choice: empty, filled for the choice you picked. */
.woo-poll-dot {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--woo-line-strong);
    border-radius: 50%;
}

.woo-poll-option.is-mine .woo-poll-dot {
    border-color: var(--woo-fg);
    background: radial-gradient(circle, var(--woo-fg) 0 45%, transparent 50%);
}

.woo-poll-label {
    overflow-wrap: anywhere;
}

.woo-poll-option.is-mine .woo-poll-label,
.woo-poll-option.is-top .woo-poll-label {
    font-weight: 600;
}

.woo-poll-bar {
    height: 0.4rem;
    margin: 0.1rem 0 0.1rem 2rem;
    background: var(--woo-surface);
    border-radius: 999px;
    overflow: hidden;
}

.woo-poll-bar > span {
    display: block;
    height: 100%;
    background: var(--woo-line-strong);
    border-radius: 999px;
}

.woo-poll-option.is-top .woo-poll-bar > span,
.woo-poll-option.is-mine .woo-poll-bar > span {
    background: var(--woo-fg);
}

.woo-poll-count,
.woo-poll-voters {
    margin-left: 2rem;
    font-size: 0.9rem;
    color: var(--woo-muted);
    overflow-wrap: anywhere;
}

.woo-poll-outcome {
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.woo-poll-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.woo-poll-actions form {
    display: inline;
    margin: 0;
}

/* The ticked-from-the-pot list on the new poll sheet: a box that scrolls rather than a very long sheet. */
.woo-poll-things {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 12px;
}

/* The new poll sheet shows the part for whichever "People pick from" is set to - things, dates or other choices (no JavaScript needed). */
#woo-poll-new:not(:has(#poll-pick-things:checked)) .woo-poll-things-only,
#woo-poll-new:not(:has(#poll-pick-dates:checked)) .woo-poll-dates-only,
#woo-poll-new:not(:has(#poll-pick-other:checked)) .woo-poll-other-only {
    display: none;
}

/* The close poll sheet shows the "Update a thing" boxes only when that choice is picked (no JavaScript needed). */
#woo-poll-close:not(:has(#close-mode-update:checked)) .woo-poll-update-only {
    display: none;
}

/* "Create a new pot" in the left menu's pots list when there are none yet */
.woo-sublink--create {
    color: var(--woo-muted);
}

/* Count badges: the number on the bell, and on the To sort icon where it sits on an icon (the phone's bottom bar, and the left menu when it is
   icons only). Their colour is the person's "Count badges" choice (Settings, Appearance), set as three custom properties by PillPalette.ToCss;
   with no choice they are solid red, white text and no border. The To sort number on the full left menu is the To sort pill instead. */
.woo-countbadge {
    background: var(--woo-count-bg, #c62828);
    border-color: var(--woo-count-line, transparent);
    color: var(--woo-count-fg, #ffffff);
    font-weight: 700;
}

.woo-bell-count.woo-countbadge {
    border: 1px solid var(--woo-count-line, transparent);
    line-height: calc(1.15rem - 2px);
}

html[data-nav="rail"] .woo-sidenav .woo-sidecount.woo-badge {
    background: var(--woo-count-bg, #c62828);
    border-color: var(--woo-count-line, transparent);
    color: var(--woo-count-fg, #ffffff);
}

/* Settings, Pill colours: the "No border" example is the solid fill with no edge */
.woo-colourset:has(.woo-style-flat input:checked) .woo-colour-chip {
    background: var(--sw-fbg);
    border-color: var(--sw-fline);
    color: var(--sw-ffg);
}

[data-bs-theme="dark"] .woo-colourset:has(.woo-style-flat input:checked) .woo-colour-chip {
    background: var(--sw-fbg-d);
    border-color: var(--sw-fline-d);
    color: var(--sw-ffg-d);
}

/* Select several things (To sort list, a pot's page): the bar above the list, and a tick box on each row while selecting */
.woo-selectbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

[data-select-scope]:not(:has(.woo-row)) .woo-selectbar {
    display: none;
}

.woo-selecttools {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
}

.woo-selecttools[hidden] {
    display: none;
}

.woo-row-select {
    display: none;
}

[data-selecting] .woo-row-select {
    display: block;
    flex: 0 0 auto;
    align-self: center; /* in the middle of the row, up and down */
    margin-top: 0;
}

/* The box above the column of ticks: same size and place as theirs. Empty, it shows a faint tick when you point at it (as Outlook does);
   a dash while only some rows are ticked. */
.woo-select-all {
    flex: none;
    margin: 0;
    cursor: pointer;
}

.woo-select-all:not(:checked):not(:indeterminate):hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%238a8a8a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

[data-selecting] .woo-row-select + .woo-row-main {
    padding-left: 0;
}

.woo-bulk-things {
    padding-left: 1.1rem;
}

.woo-bulk-head {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}

/* A filter that is only an icon (private / shared / public): drawn like the "+" on the Pots page - just the icon, with a round
   background that appears when you point at it. The one that is switched on keeps its filled circle so you can see which it is. */
.woo-filters:has(.woo-filter--icon) {
    align-items: center;
}

.woo-filter.woo-filter--icon {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.5rem;
    border: 0;
    color: var(--woo-muted);
}

.woo-filter.woo-filter--icon:hover {
    background: var(--woo-surface);
    color: var(--woo-fg);
}

.woo-filter.woo-filter--icon[aria-current="true"],
.woo-filter.woo-filter--icon[aria-pressed="true"] {
    background: var(--woo-fg);
    color: var(--woo-bg);
}

.woo-filter--icon svg {
    width: 1.2em;
    height: 1.2em;
}

/* A person's name as a pill (the people pill on a pot's page): a long name is cut with "..." instead of pushing the row wider than the screen */
.woo-badge--names {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

/* "Larger on a phone" (Settings, Appearance; <html data-large="true">). On a phone, the Pots page's top buttons are as big as the icons on the
   bottom bar (1.9rem), and the pills under each pot are as big as its description (1.1rem) with icons as big as the pot's own icons
   (1.35em of the .95rem icon button = 1.2825rem). Only the Pots page for now. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-page-head--pots .woo-page-icons .woo-icon,
    html[data-large="true"] .woo-page-head--pots .woo-filter--icon svg {
        width: 1.9rem;
        height: 1.9rem;
    }

    html[data-large="true"] .woo-card--pot .woo-row-meta {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-card--pot .woo-row-meta .woo-badge {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-card--pot .woo-row-meta .woo-badge:has(.woo-icon) {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    html[data-large="true"] .woo-card--pot .woo-row-meta .woo-badge .woo-icon {
        width: 1.2825rem;
        height: 1.2825rem;
    }
}

/* "Larger on a phone", a pot's own page: the icon row is as big as the bottom bar's (and wraps rather than running off the screen if there are
   a lot of them), and the pill row under the name matches the Pots page's pills. The things in the list are unchanged for now. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-page-head--stacked > .d-flex {
        flex-wrap: wrap;
    }

    html[data-large="true"] .woo-page-head--stacked .woo-iconbtn .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }

    html[data-large="true"] .woo-pot-pills {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-pot-pills .woo-badge {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-pot-pills .woo-badge:has(.woo-icon) {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    html[data-large="true"] .woo-pot-pills .woo-badge .woo-icon {
        width: 1.2825rem;
        height: 1.2825rem;
    }
}

/* "Larger on a phone", the things in a list (a pot's page, the Pile, To sort, search...): the title and the pills under it are the size of a pot's
   name and pills on the Pots page. A pill that is a button with only an icon in it (add a reaction, done, comment) is as tall as the pills with
   words, so it does not look smaller beside them. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-row-title {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-row-meta {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-row-meta .woo-badge,
    html[data-large="true"] .woo-row-meta .woo-chip {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-row-meta .woo-badge:has(.woo-icon),
    html[data-large="true"] .woo-row-meta .woo-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    html[data-large="true"] .woo-row-meta .woo-badge .woo-icon,
    html[data-large="true"] .woo-row-meta .woo-chip .woo-icon {
        width: 1.2825rem;
        height: 1.2825rem;
    }

    html[data-large="true"] .woo-row-meta .woo-badge--toggle,
    html[data-large="true"] .woo-pot-pills .woo-badge--toggle,
    html[data-large="true"] .woo-card--pot .woo-row-meta .woo-badge--toggle {
        min-height: calc(1.1rem * 1.55 + 2px);
    }
}

/* "Larger on a phone", the To sort page: its "+" is the size of the bottom bar's icons, and its pills match a pot's. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-page-head .woo-iconbtn .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }
}

/* A row with no picture has the "..." button on its own in the right-hand column: centre it up and down against the row's height
   (with a picture the column holds the picture, as before). */
.woo-row-side:has(.woo-row-actions) {
    align-self: stretch;
    justify-content: center;
}

/* The Select pill (the list icon, last in a page's row of pills): solid while Select is on. It goes when the list has nothing in it, and
   the bar under the pills (the box that ticks all, "n selected", Actions) only shows while selecting. */
.woo-selectpill[aria-pressed="true"],
.woo-selectpill[aria-pressed="true"]:hover,
.woo-filterpill[aria-pressed="true"],
.woo-filterpill[aria-pressed="true"]:hover {
    background: var(--woo-fg);
    border-color: var(--woo-fg);
    color: var(--woo-bg);
}

/* No things listed: no Select pill. !important because the larger-on-a-phone rules give icon pills "display: inline-flex". */
body:not(:has([data-select-scope] .woo-row)) [data-select-toggle] {
    display: none !important;
}

[data-select-scope]:not([data-selecting]) .woo-selectbar {
    display: none;
}

/* A pot's page, on a phone: the icons at the top sit in the same six equal columns as the bottom bar, counted from the right, so each one is
   straight above one of the bar's icons. The bar's columns run from 0.25rem in from each side of the screen, the page has 1rem each side, so the
   row is pulled out by the difference (0.75rem). A seventh icon, if there ever is one, wraps onto a second row. */
@media (max-width: 767.98px) {
    .woo-page-head--stacked > .d-flex {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0 !important; /* Bootstrap's gap-1 on the row needs !important to beat */
    }

    .woo-page-head--stacked > .d-flex .woo-iconbtn {
        flex: 0 0 calc(100% / 6);
        min-width: 0;
        padding: 0;
    }
}

/* "Larger on a phone", the top bar: the light / dark button and the bell are as big as the bottom bar's icons (the bell's count stays in its corner). */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-topbar .woo-iconbtn .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }

    /* The bell's number sits a little higher and further left than usual (usually top 4px, right 0), clear of the bigger icon. */
    html[data-large="true"] .woo-topbar .woo-bell-count {
        top: 1px;
        right: 3px;
    }
}

/* "Larger on a phone", the Calendar: the filter buttons, the headings, the agenda's pot labels and the month grid (bigger numbers, dots and day
   names; each square a little taller). Numbers: filters 1.1rem, headings 1.25rem / 1.1rem, labels 1rem, grid 1.3rem month / 1.05rem days. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-page-head--filters .woo-filter,
    html[data-large="true"] .woo-cal-range .woo-filter {
        min-height: 40px;
        padding: 0 1rem;
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-agenda-month {
        font-size: 1.25rem;
    }

    html[data-large="true"] .woo-agenda-heading {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-agenda-pot {
        font-size: 1rem;
        gap: 0.4rem;
    }

    html[data-large="true"] .woo-agenda-pot .woo-icon {
        width: 1.15em;
        height: 1.15em;
    }

    html[data-large="true"] .woo-cal-nav .woo-iconbtn .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }

    html[data-large="true"] .woo-cal-month {
        font-size: 1.3rem;
    }

    html[data-large="true"] .woo-cal-dow {
        font-size: 0.9rem;
    }

    html[data-large="true"] .woo-cal-cell {
        min-height: 4.2rem;
    }

    html[data-large="true"] .woo-cal-num {
        min-width: 1.9rem;
        font-size: 1.05rem;
        line-height: 1.9rem;
    }

    html[data-large="true"] .woo-cal-dot {
        width: 8px;
        height: 8px;
    }

    html[data-large="true"] .woo-cal-dots {
        gap: 4px;
    }
}

/* "Larger on a phone", the Home page's Getting started cards: icons as big as the bottom bar's, the card's name a size up, the line under it
   the size of a pot's description. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-start-head .woo-iconbtn .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }

    html[data-large="true"] .woo-start-card .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }

    html[data-large="true"] .woo-start-card .woo-card-title {
        font-size: 1.25rem;
    }

    html[data-large="true"] .woo-start-card small {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-start-card small .woo-icon {
        width: 1.1em;
        height: 1.1em;
    }
}

/* A filter pill with just an icon in it (the Calendar's List / Calendar switch): still a pill, with the icon in the middle. */
.woo-filter--glyph {
    justify-content: center;
    padding: 0 0.8rem;
}

.woo-filter--glyph .woo-icon {
    width: 1.15rem;
    height: 1.15rem;
}

/* "Larger on a phone": the icon is the size of the bottom bar's icons, in a pill as tall as the text filters */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-filter--glyph {
        padding: 0 0.9rem;
    }

    html[data-large="true"] .woo-filter--glyph .woo-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* "Larger on a phone", the sheets (the + sheet, thing details, tags, polls...) and the forms in them. Written once for what they all share, so every
   sheet follows: the title and the close button, the tab strip, labels and hints, the boxes you type in, the ticks and choice cards, and the
   buttons. Sizes: title 1.4rem, labels / typing / buttons 1.1rem, hints 1.05rem, ticks 1.6em, close button as big as the bottom bar's icons. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-shell-title {
        font-size: 1.4rem;
    }

    /* The close X: its picture is the whole of 1em (a Lucide icon is about half its box), so 1.15rem looks like the 1.9rem icons; the padding keeps
       the area you can press about 46px. */
    html[data-large="true"] .woo-shell-head .btn-close {
        font-size: 1.15rem;
        padding: 0.7rem;
    }

    html[data-large="true"] .woo-shell-body .woo-filter:not(.woo-filter--icon) {
        min-height: 40px;
        padding: 0 1rem;
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-shell-body .woo-filter--icon svg {
        width: 1.9rem;
        height: 1.9rem;
    }

    html[data-large="true"] .woo-shell-body .form-label {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-shell-body .form-text {
        font-size: 1.05rem;
    }

    html[data-large="true"] .woo-shell-body .form-control,
    html[data-large="true"] .woo-shell-body .form-select {
        min-height: 52px;
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-shell-body textarea.form-control {
        min-height: 6.5rem;
    }

    html[data-large="true"] .woo-shell-body .form-check-input {
        width: 1.6em;
        height: 1.6em;
    }

    html[data-large="true"] .woo-shell-body .form-check-label {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-shell-body .woo-choice {
        padding-left: 3rem;
    }

    html[data-large="true"] .woo-shell-body .woo-choice .form-check-input {
        margin-left: -2.15rem;
    }

    html[data-large="true"] .woo-shell-body .woo-choice-title {
        font-size: 1.15rem;
    }

    html[data-large="true"] .woo-shell-body .woo-choice-desc {
        font-size: 1.05rem;
    }

    html[data-large="true"] .woo-shell-body details > summary {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-shell-body .woo-alert {
        font-size: 1.05rem;
    }

    html[data-large="true"] .woo-shell-body .btn {
        --bs-btn-font-size: 1.1rem;
        min-height: 52px;
    }
}

/* =========================================================
   "Larger on a phone", everything else. The rules above did the pages one at a time; these do what is left, for every page and sheet at once
   (anything not named here, or that you have not met yet, is a size that still needs adding). Phone width only, and only when Settings >
   Appearance > Larger on a phone is on. The scale used throughout: icons 1.9rem (the bottom bar's), pill and button text 1.1rem, small print 1rem.
   ========================================================= */
@media (max-width: 767.98px) {
    /* Ordinary text (descriptions, paragraphs, table cells): a little over the usual 18px */
    html[data-large="true"] body {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-h2 {
        font-size: 1.3rem;
    }

    html[data-large="true"] .woo-small,
    html[data-large="true"] .woo-divider,
    html[data-large="true"] .woo-token,
    html[data-large="true"] .woo-poll-voters,
    html[data-large="true"] .woo-comment-replying,
    html[data-large="true"] .woo-comment-link,
    html[data-large="true"] .woo-mention-chip,
    html[data-large="true"] .woo-comment-quote,
    html[data-large="true"] .woo-colour .woo-badge,
    html[data-large="true"] .woo-colour-preview,
    html[data-large="true"] .woo-colour-example-label {
        font-size: 1rem;
    }

    html[data-large="true"] .woo-comment-time,
    html[data-large="true"] pre.woo-pre {
        font-size: 0.95rem;
    }

    html[data-large="true"] .form-text,
    html[data-large="true"] .woo-choice-desc,
    html[data-large="true"] .woo-note,
    html[data-large="true"] .woo-rate-choice,
    html[data-large="true"] .table,
    html[data-large="true"] .woo-potlist-grid {
        font-size: 1.05rem;
    }

    html[data-large="true"] .woo-potlist-grid thead th {
        font-size: 0.95rem;
    }

    /* The bottom bar's words (only when the bar shows them) and the calendar's longer entries */
    html[data-large="true"] .woo-navlink {
        font-size: 0.88rem;
    }

    html[data-large="true"] .woo-cal-ev {
        font-size: 0.85rem;
    }

    html[data-large="true"] .woo-cal-more {
        font-size: 0.8rem;
    }

    /* Pills of every kind, wherever they are (the rows, pots and Calendar above are just a few of the places): text 1.1rem, icons 1.2825rem */
    html[data-large="true"] .woo-badge:not(.woo-countbadge):not(.woo-navcount):not(.woo-sidecount),
    html[data-large="true"] .woo-chip {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-badge:not(.woo-countbadge):not(.woo-navcount):not(.woo-sidecount):has(.woo-icon),
    html[data-large="true"] .woo-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }

    html[data-large="true"] .woo-badge:not(.woo-countbadge):not(.woo-navcount):not(.woo-sidecount) .woo-icon,
    html[data-large="true"] .woo-chip .woo-icon {
        width: 1.2825rem;
        height: 1.2825rem;
    }

    html[data-large="true"] .woo-badge--toggle {
        min-height: calc(1.1rem * 1.55 + 2px);
    }

    /* The tag / choice pills you press in the sheets (tags, people, the colour choices) */
    html[data-large="true"] .woo-pick {
        padding: 0.2rem 1rem;
        font-size: 1.1rem;
    }

    /* Filter pills with words, and the icon-only ones */
    html[data-large="true"] .woo-filter:not(.woo-filter--icon):not(.woo-filter--glyph) {
        min-height: 40px;
        padding: 0 1rem;
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-filter--icon svg {
        width: 1.9rem;
        height: 1.9rem;
    }

    /* Icon buttons anywhere (the "..." on a row, the arrows, the small ones in sheets): the bottom bar's size */
    html[data-large="true"] .woo-iconbtn .woo-icon {
        width: 1.9rem;
        height: 1.9rem;
    }

    /* ...except the buttons on a pot's card and a thing's row, which keep the size you tried them at (1.35em of the button's .95rem) */
    html[data-large="true"] .woo-card-actions .woo-iconbtn .woo-icon,
    html[data-large="true"] .woo-row-actions .woo-iconbtn .woo-icon {
        width: 1.2825rem;
        height: 1.2825rem;
    }

    /* Boxes and buttons on every page, not only in the sheets */
    html[data-large="true"] .form-label {
        font-size: 1.1rem;
    }

    html[data-large="true"] .form-control,
    html[data-large="true"] .form-select {
        min-height: 52px;
        font-size: 1.1rem;
    }

    html[data-large="true"] input[type="file"].form-control {
        line-height: 50px;
    }

    html[data-large="true"] textarea.form-control {
        min-height: 6.5rem;
    }

    html[data-large="true"] .form-check-input {
        width: 1.6em;
        height: 1.6em;
    }

    html[data-large="true"] .form-check-label {
        font-size: 1.1rem;
    }

    html[data-large="true"] .btn {
        --bs-btn-font-size: 1.1rem;
        min-height: 52px;
    }

    html[data-large="true"] .btn-sm {
        --bs-btn-font-size: 1.05rem;
        min-height: 44px;
    }

    html[data-large="true"] details > summary {
        font-size: 1.1rem;
    }

    html[data-large="true"] .woo-alert {
        font-size: 1.05rem;
    }

    /* The Identity pages (sign in, create an account...): the same boxes and buttons, a little more space between them */
    html[data-large="true"] .woo-auth .woo-stack {
        gap: 0.9rem;
    }
}

/* "Larger on a phone", the preview pictures on a thing's row: half as big again (56px x 1.5 = 84px). The right-hand column that holds the picture
   (and the "..." button when there is no picture) is the same width, so it still lines up down the page. */
@media (max-width: 767.98px) {
    html[data-large="true"] .woo-row-side {
        width: 84px;
    }

    html[data-large="true"] .woo-row-thumb {
        width: 84px;
        height: 84px;
        border-radius: 14px;
    }
}

/* A type of thing can have its own background on a pot's page: appsettings "ThingTypes" (e.g. Poll), written onto the row as --woo-type-bg
   (and --woo-type-bg-dark for the dark theme). The background reaches a little past the row either side so the text stays in line with the rest. */
.woo-pot-things .woo-row.has-type-bg {
    margin-left: -0.6rem;
    margin-right: -0.6rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    background: var(--woo-type-bg);
}

[data-bs-theme="dark"] .woo-pot-things .woo-row.has-type-bg {
    background: var(--woo-type-bg-dark, var(--woo-type-bg));
}

/* ...and the plain pills and chips on such a row (type, date, place, done, comment, reactions...) get the page's own background, so the row's colour
   does not show through them: small chips sitting on the colour. Pills with a fill of their own (tags, "New", the switched-on ones) are left alone. */
.woo-pot-things .woo-row.has-type-bg :is(.woo-badge, .woo-chip):not(.woo-badge--tag):not(.woo-badge--mark):not(.woo-badge--shared):not(.woo-badge--potag):not(.woo-badge--good):not(.woo-badge--bad):not(.woo-badge--alert):not(.woo-badge--selected):not([aria-pressed="true"]) {
    background-color: var(--woo-bg);
}

/* A thing's title is shown in bold wherever a thing is listed (a pot, To sort, the calendar, search results). */
.woo-thing-title {
    font-weight: 600;
}

/* The trophy on a closed poll's result pill is gold. */
.woo-badge--winner .woo-icon {
    color: #d49a00;
    opacity: 1;
}

[data-bs-theme="dark"] .woo-badge--winner .woo-icon {
    color: #f5c518;
}

/* Larger on a phone: the bigger tick boxes made a switch as wide as it is tall (it looked like a radio button).
   Keep it the same shape as the normal switch (2 : 1.4), scaled to the new height. */
@media (max-width: 767.98px) {
    html[data-large="true"] .form-switch .form-check-input {
        width: 2.3em;
    }
}

/* Settings > Appearance: the "Use defaults" / "Use custom ..." radio buttons and the Delete / Add to pot tick boxes. Laid out in a row each (button, then words, centred on
   each other) so a bigger button can't hang below its line or touch the next one. */
.woo-checkrows .form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 0;
    margin-bottom: 0.6rem;
    padding-left: 0;
}

.woo-checkrows .form-check:last-child {
    margin-bottom: 0;
}

.woo-checkrows .form-check-input {
    float: none;
    flex: none;
    margin: 0;
}

.woo-checkrows .form-check-label {
    padding-left: 0;
}

/* ---- Pot page: the Order button (opens the Order sheet) ---- */

/* No things listed, nothing to put in order. */
body:not(:has([data-select-scope] .woo-row)) .woo-sortpill {
    display: none !important;
}

/* ---- Sections in a pot ---- */

/* A section: a header that folds away, with the things in it (and the sections inside it) underneath. Sections inside sections are
   indented, with a thin line down their left edge; less on a phone. */
.woo-section {
    margin-top: 0.4rem;
}

.woo-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--woo-line-strong);
}

.woo-section-head::-webkit-details-marker {
    display: none;
}

/* The little arrow: points right while folded, down while open. */
.woo-section-head::before {
    content: "";
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.woo-section[open] > .woo-section-head::before {
    transform: rotate(45deg);
}

.woo-section-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The count after a section's name is not bold like the name (the header's weight would otherwise reach it). */
.woo-section-count {
    font-weight: 400;
}

/* The little link in a section's header that opens just that section. */
.woo-section-open {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.3rem;
    color: var(--woo-muted);
    text-decoration: none;
}

.woo-section-open:hover {
    color: var(--woo-fg);
}

/* The way back when one section is opened on its own: Pot > Packing > Kids. */
.woo-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}

.woo-crumbs-sep {
    color: var(--woo-muted);
}

.woo-section-body > .woo-section {
    margin-left: 0.9rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--woo-line);
}

@media (max-width: 767.98px) {
    .woo-section-body > .woo-section {
        margin-left: 0.25rem;
        padding-left: 0.4rem;
    }
}

/* The sheet that arranges them. */
.woo-sectionlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woo-sectionlist-item {
    padding: 0.5rem 0 0.5rem calc(var(--depth, 0) * 1.1rem);
    border-bottom: 1px solid var(--woo-line);
}

.woo-sectionlist-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.woo-sectionlist-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.woo-sectionlist-move {
    flex: none;
}

/* The thin chevrons on the move up / move down buttons: the same arrowhead as on a fold on the thing's sheet. */
.woo-tri {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.woo-tri--up {
    transform: translateY(0.12rem) rotate(-135deg);
}

.woo-tri--down {
    transform: translateY(-0.12rem) rotate(45deg);
}

.woo-sectionlist-edit {
    margin-top: 0.4rem;
}

/* Details on a thing: name and value pairs on the open thing's sheet, and the small marker on a list row that it has some. */
.woo-detaillist {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.woo-detaillist > li {
    border-bottom: 1px solid var(--woo-line);
}

.woo-detailrow > summary,
.woo-detailrow-plain {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    cursor: pointer;
}

.woo-detailrow-plain {
    cursor: default;
}

.woo-detail-name {
    color: var(--woo-muted);
}

.woo-detail-value {
    text-align: right;
    overflow-wrap: anywhere;
}

.woo-detailedit {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding-bottom: 0.5rem;
}

.woo-detailform {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}

.woo-detailform .btn {
    justify-self: start;
}

/* The structure box of a pot template: plain text where the spacing matters. */
.woo-structure {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    white-space: pre;
    overflow-x: auto;
}

/* One line of the "templates offered here" sheet: the template, and the "starts selected" choice at the far end. */
.woo-offerrow {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.25rem 0;
}

/* The pot page's "started from" filter and "add up" choice, above the list. */
.woo-filterbar {
    margin: 0.5rem 0;
    max-width: 20rem;
}

.woo-filterbar .form-select + .form-select {
    margin-top: 0.4rem;
}

/* A section's total for the detail being added up, beside its count. */
.woo-badge--sum {
    margin-left: 0.25rem;
}

/* Photos on a thing's sheet: one row each - the picture, then (for whoever may edit) a caption box and small buttons for up, down, cover and remove. */
.woo-photolist {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.woo-photorow {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-photorow-pic {
    flex: none;
    display: block;
    line-height: 0;
}

.woo-photorow-pic img {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--woo-line);
    background: var(--woo-surface);
}

.woo-photorow-main {
    flex: 1 1 auto;
    min-width: 0;
}

.woo-photorow-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.woo-photo-caption {
    overflow-wrap: anywhere;
}

.woo-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

/* Files (documents) on a thing's sheet: one row each - a file icon, the name (a download link) with its size, and a Remove button for whoever may edit. */
.woo-filelist {
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
}

.woo-filerow {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--woo-line);
}

.woo-filerow-icon {
    flex: none;
    display: inline-flex;
    color: var(--woo-muted, inherit);
}

.woo-filerow-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* =========================================================
   A pot's picture
   Small beside the name, or (if its owner chose that) behind the whole heading.
   ========================================================= */

.woo-pot-thumb {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--woo-line);
    background: var(--woo-surface);
}

/* In the pot's own heading it sits inline, in front of the name */
.woo-pot-thumb--head {
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.5rem;
    vertical-align: -0.45rem;
}

/* The preview on the Details tab of the pot's Settings */
.woo-pot-picture-preview {
    display: block;
    max-width: 100%;
    max-height: 12rem;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--woo-line);
}

/* The picture behind a heading. A dark wash keeps the white writing readable on a light picture. */
.woo-has-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--woo-bg) center / cover no-repeat;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: #fff;
}

.woo-has-bg .woo-h1,
.woo-has-bg .woo-card-title,
.woo-has-bg a,
.woo-has-bg .woo-card-link,
.woo-has-bg .woo-card-link:hover {
    color: #fff;
}

.woo-has-bg .woo-accent-title {
    border-left-color: #fff;
}

.woo-has-bg .woo-iconbtn {
    color: #fff;
}

.woo-has-bg .woo-iconbtn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.woo-page-head.woo-has-bg {
    margin-bottom: 1rem;
}

/* ---- The thing's sheet: "+ add" pills, folded sections, the More menu ---- */
.woo-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.woo-addpill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 36px;
    border: 1px dashed var(--woo-line-strong);
    border-radius: 999px;
    background: transparent;
    padding: 0.2rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--woo-fg);
    cursor: pointer;
}

.woo-addpill:hover {
    border-style: solid;
    background: var(--woo-surface);
}

.woo-addpill .woo-icon {
    width: 1em;
    height: 1em;
}

.woo-fold {
    border-bottom: 1px solid var(--woo-line);
}

.woo-fold > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.4rem 0;
    cursor: pointer;
    list-style: none;
}

.woo-fold > summary::-webkit-details-marker {
    display: none;
}

/* A small chevron on the right: down when folded, up when open */
.woo-fold > summary::after {
    content: "";
    flex: none;
    margin: 0 0.3rem 0.2rem auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--woo-muted);
    border-bottom: 2px solid var(--woo-muted);
    transform: rotate(45deg);
    transition: transform 0.15s;
}

.woo-fold[open] > summary::after {
    margin-bottom: 0;
    transform: rotate(-135deg);
}

.woo-fold-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.woo-fold-count {
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--woo-muted);
}

.woo-fold-count:empty {
    display: none;
}

.woo-fold-body {
    padding: 0.2rem 0 0.9rem;
}

.woo-actionrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0.75rem;
}

.woo-actionrow > .btn {
    flex: 1 1 auto;
}

.woo-more {
    margin-bottom: 1rem;
}

.woo-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 999px;
    color: var(--woo-fg);
    cursor: pointer;
    list-style: none;
}

.woo-more > summary::-webkit-details-marker {
    display: none;
}

.woo-more > summary:hover {
    background: var(--woo-surface);
}

.woo-more-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* The pencil (editors, admins and the owner) comes first, then the "+": the first icon pushes them all to the right, the rest sit next to it. */
.woo-section-open + .woo-section-open {
    margin-left: 0;
}

/* The Add sheet: a pot's section list sits inside the pot's own bordered card, under its name. */
.woo-choice-row {
    display: block;
    cursor: pointer;
}

.woo-choice-sub {
    margin-top: 0.6rem;
    cursor: default;
}

.woo-choice-sub[hidden] {
    display: none;
}

/* =========================================================
   Cards to choose from, the steps of the Add sheet, and the icon picker
   ========================================================= */

/* A row of cards that scrolls sideways on a touch screen (the next one peeks in from the edge) and wraps onto rows where there is a mouse.
   Used for the pot template choice on the New pot sheet. */
.woo-card-strip {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.2rem 0.2rem 0.6rem;
    margin: 0 -0.2rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

@media (hover: hover) and (pointer: fine) {
    .woo-card-strip {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

.woo-card-strip[hidden] {
    display: none;
}

/* One card: an icon top-left and a name bottom-left. A button (pot templates) or a label round a hidden radio (how to add a thing). Chosen = solid, like a solid pill. */
.woo-pick-card {
    position: relative;
    flex: 0 0 auto;
    width: 8rem;
    min-height: 6.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 16px;
    background: var(--woo-bg);
    color: var(--woo-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
}

.woo-pick-card:hover {
    background: var(--woo-surface);
}

.woo-pick-card[aria-pressed="true"],
.woo-pick-card:has(.woo-pick-input:checked) {
    background: var(--woo-fg);
    color: var(--woo-bg);
    border-color: var(--woo-solid-edge);
}

.woo-pick-card:focus-visible,
.woo-pick-card:has(.woo-pick-input:focus-visible) {
    outline: 2px solid var(--woo-fg);
    outline-offset: 2px;
}

.woo-pick-icon .woo-icon {
    width: 1.7rem;
    height: 1.7rem;
}

/* The line under the pot cards (the chosen card's description) keeps room for two lines, so the page does not jump when a one-line description is swapped for a two-line one. */
.woo-note[data-pot-note] {
    min-height: 2.8em;
}

.woo-pick-name {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* The radio inside a card is there for keyboards and screen readers; the card is the thing you see. */
.woo-pick-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* "How do you want to add it?": three cards side by side, a little shorter than the pot template ones. */
.woo-source-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.woo-source-cards .woo-pick-card {
    width: auto;
    min-height: 5rem;
}

/* The Add sheet opened from inside a pot: the types it suggests, two across on a phone and three on a computer, the same size as the "how to add it" cards. */
.woo-type-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .woo-type-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.woo-type-cards .woo-pick-card {
    width: auto;
    min-height: 5rem;
}

/* The small line under a card's name (the heading it is listed under). */
.woo-pick-sub {
    font-size: 0.75rem;
    line-height: 1.15;
    opacity: 0.8;
}

/* Once a type is picked the box is called "What is it called?" and the hints about links and photos are not wanted. */
[data-text-block][data-hide-hints] .form-text {
    display: none;
}

/* Pictures chosen on the Add sheet, as small squares. */
.woo-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.woo-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--woo-line-strong);
    border-radius: 8px;
}

/* The steps of the Add sheet: a bar for each, the ones reached drawn solid. Each is a button, so any step already reached can be gone back to. */
.woo-steps {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.woo-steps li {
    flex: 1 1 0;
    min-width: 0;
}

.woo-step-dot {
    display: block;
    width: 100%;
    padding: 0.4rem 0 0;
    border: 0;
    border-top: 3px solid var(--woo-line-strong);
    background: none;
    color: var(--woo-muted);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woo-step-dot[aria-current="step"] {
    border-top-color: var(--woo-fg);
    color: var(--woo-fg);
    font-weight: 700;
}

.woo-step-dot[data-done] {
    border-top-color: var(--woo-fg);
}

.woo-step-title {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.woo-step-title:focus {
    outline: none;
}

.woo-wizard-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.woo-wizard-footer .woo-wizard-next {
    flex: 1 1 auto;
}

/* On the last step there is no Next, so Add takes the room. */
.woo-wizard-footer.is-last .woo-wizard-add {
    flex: 1 1 auto;
}

.woo-wizard-footer [hidden] {
    display: none;
}

/* The buttons are laid out in a grid at every width (phone and desktop), each as wide as it can be:
   first step  - Next, then Create, each full width;
   middle step - Back and Next half width each, then Create full width;
   last step   - Back, then Create, each full width. */
.woo-wizard-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.woo-wizard-footer .woo-wizard-back {
    order: 1;
}

.woo-wizard-footer .woo-wizard-next {
    order: 2;
}

.woo-wizard-footer .woo-wizard-add {
    order: 3;
    grid-column: 1 / -1;
}

/* No Back (first step): Next takes the whole row. No Next (last step): Back does. */
.woo-wizard-footer .woo-wizard-back[hidden] ~ .woo-wizard-next,
.woo-wizard-footer.is-last .woo-wizard-back {
    grid-column: 1 / -1;
}

/* A step whose own heading says what the choices' legend would (New pot's "Who can see it?"): the legend stays for screen readers only. */
.woo-hide-legend legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The icon picker on a pot template's form: a grid of small squares, the chosen one solid. */
.woo-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.woo-icon-pick {
    position: relative;
    cursor: pointer;
}

.woo-icon-pick input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.woo-icon-pick span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--woo-line-strong);
    border-radius: 10px;
}

.woo-icon-pick input:checked + span {
    background: var(--woo-fg);
    color: var(--woo-bg);
    border-color: var(--woo-solid-edge);
}

.woo-icon-pick input:focus-visible + span {
    outline: 2px solid var(--woo-fg);
    outline-offset: 2px;
}