/* Theming ---------------------------------------------------------------- Every colour the app paints with is declared once below as a light/dark pair. `color-scheme` picks which half of each light-dark() is used, so the whole palette flips from the three rules here and nothing else in this file has to know a theme exists -- a new rule only has to reach for a token. The default follows the operating system. [data-theme] on is the explicit override the header toggle writes; the inline script in base.html.twig replays it before first paint so a chosen theme never flashes the other one on the way in. Setting color-scheme (rather than only our own tokens) also hands the browser the theme for the things we do not paint: form controls, scrollbars, and the default dialog backdrop. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* Surfaces, ink and lines. Dark is a near-neutral slate rather than pure black so raised surfaces can sit above the page without a border. */ --tp-bg: light-dark(#F7F8FA, #0E1116); --tp-surface: light-dark(#FFFFFF, #161B22); --tp-surface-alt: light-dark(#F1F3F6, #1F252E); --tp-ink: light-dark(#111827, #E7ECF3); --tp-ink-muted: light-dark(#5B6472, #A6B1BF); --tp-ink-subtle: light-dark(#7C8794, #7E8896); --tp-border: light-dark(#E5E7EB, #2A313B); --tp-border-strong: light-dark(#CBD1D9, #3C4552); /* Teal stays the brand in both themes; dark lifts it to a tint that clears contrast on a dark surface, which in turn flips the ink that sits on it. */ --tp-primary: light-dark(#0F766E, #2DD4BF); --tp-primary-hover: light-dark(#0B5F58, #5EEAD4); --tp-primary-ink: light-dark(#FFFFFF, #04231F); /* Task and Reward status. The *-bg/*-ink pairs are tinted chips; the bare ones are dots and bars that sit directly on a surface. */ --tp-star: light-dark(#D97706, #FBBF24); --tp-available: light-dark(#16A34A, #4ADE80); --tp-claimed-self: light-dark(#D97706, #FBBF24); --tp-claimed-other: light-dark(#94A3B8, #7A8798); --tp-available-bg: light-dark(#DCFCE7, #123326); --tp-available-ink: light-dark(#15803D, #5EEAA0); --tp-claimed-self-bg: light-dark(#FEF3C7, #3A2A10); --tp-claimed-self-ink: light-dark(#92400E, #FBBF24); --tp-points-bg: light-dark(#FEF3C7, #3A2A10); --tp-points-ink: light-dark(#92400E, #FBBF24); --tp-icon-tile: light-dark(#ECFDF5, #142520); /* Tinted glyph tiles and status pills. Light tints darken into a muted wash; the ink lightens to match, so each pair keeps its hue as the carrier of meaning in both themes. */ --tint-primary-bg: light-dark(#E7F4F3, #12302E); --tint-primary-ink: var(--tp-primary); --tint-success-bg: light-dark(#ECFDF5, #123326); --tint-success-ink: light-dark(#15803D, #5EEAA0); --tint-info-bg: light-dark(#EFF6FF, #16233B); --tint-info-ink: light-dark(#1D4ED8, #93B4FF); --tint-reward-bg: light-dark(#F5F3FF, #241C3B); --tint-reward-ink: light-dark(#6D28D9, #C4B5FD); --tint-neutral-bg: light-dark(#F1F5F9, #232A33); --tint-neutral-ink: light-dark(#475569, #9AA6B4); /* The points tint thinned against the surface, for the one place that wants the hue as a whole-panel wash rather than a chip. */ --welcome-aside-bg: light-dark(#FEF8E0, #2A2318); /* A change nobody has decided yet. The same warm hue as the points tint, but spread as a whole-card wash with the colour at full strength on the card's left rail, so a waiting decision reads as unsettled beside the lists it has not landed in. */ --pending-bg: light-dark(#FEFAEC, #262015); --pending-border: light-dark(#F4E5BE, #3B3323); --pending-rail: light-dark(#F59E0B, #FBBF24); --color-surface-page: var(--tp-bg); --color-surface-raised: var(--tp-surface); --color-surface-muted: var(--tp-surface-alt); --color-ink: var(--tp-ink); --color-ink-muted: var(--tp-ink-muted); --color-ink-subtle: var(--tp-ink-subtle); --color-border: var(--tp-border); --color-border-strong: var(--tp-border-strong); --color-primary: var(--tp-primary); --color-primary-hover: var(--tp-primary-hover); --color-reward: var(--tp-star); --color-success: light-dark(#15803D, #4ADE80); --color-warning: light-dark(#B45309, #FBBF24); --color-danger: light-dark(#DC2626, #F87171); --color-danger-hover: light-dark(#B01B1B, #FCA5A5); --color-danger-ink: light-dark(#FFFFFF, #2B0A0A); --color-danger-ring: light-dark(#EC8080, #7F2A2A); --color-info: var(--tp-primary); /* Tag colours are Household data, not theme: a chip keeps the pastel its Household picked from TagPalette so the same tag stays recognisable in both themes. Those pastels are curated for dark ink, so the ink and the hairline over them are fixed too rather than following the theme up to near-white. */ --color-ink-on-pastel: #16181D; --color-overlay-line: rgb(0 0 0 / 10%); --color-scrim: light-dark(rgb(32 36 42 / 60%), rgb(6 8 11 / 72%)); /* Rotating tints behind the Task and Reward glyph tiles. Purely decorative -- the cycle only exists to keep a long list from reading as one block -- so unlike a tag colour these are free to be retuned for the theme. */ --tile-1: light-dark(#D1FADF, #17352A); --tile-2: light-dark(#E0E7FF, #1D2440); --tile-3: light-dark(#FCE7F3, #38203A); --tile-4: light-dark(#FEF0C7, #392B12); --tile-5: light-dark(#D0EBFF, #142B3D); /* The illustrated scene on the create-or-join surface. Dark keeps the drawing's shapes and swaps its palette for one at home on a dark page. */ --art-blob: light-dark(#E8F2EC, #14231F); --art-line: light-dark(#0F766E, #4FC7B8); --art-paper: light-dark(#FFFFFF, #1D2530); --art-leaf-soft: light-dark(#BFE3D0, #2F5F4E); --art-leaf: light-dark(#9CCFB4, #3E7A63); --art-leaf-mid: light-dark(#7FBE9E, #356A56); --art-leaf-deep: light-dark(#5F9C7F, #2A5546); --art-warm: light-dark(#FBD38D, #A87A34); --art-warm-soft: light-dark(#FBE3B0, #8F6B33); --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --radius-input: 8px; --radius-card: var(--tp-radius-card); --radius-dialog: var(--tp-radius-card); --border-width: 1px; --content-max: 1080px; --focus-ring: 3px solid var(--color-primary); --tp-radius-pill: 100px; --tp-radius-card: 16px; --tp-font-display: var(--font-system); } * { box-sizing: border-box; } /* Author display rules (e.g. .button { display: inline-flex }) outrank the UA [hidden] rule, so a display-styled element stays visible when toggled hidden. Restore the expected behaviour globally. */ [hidden] { display: none !important; } html { min-width: 320px; background: var(--color-surface-page); color: var(--color-ink); font-family: var(--font-system); letter-spacing: 0; } body { min-height: 100vh; margin: 0; font-size: 16px; line-height: 1.5; } a { color: inherit; } :focus-visible { outline: var(--focus-ring); outline-offset: 3px; } .skip-link { position: absolute; left: var(--space-4); top: var(--space-4); /* Above the sticky header it shares the top of the page with, or focusing it would move it somewhere it cannot be seen. */ z-index: 50; min-height: 44px; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-input); background: var(--color-surface-raised); color: var(--color-primary); transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } /* The shell stays put while the page scrolls: the balance, the switcher and -- above 640px -- the navigation are all things a Member reaches for part-way down a long list. Above the fixed bottom bar so the menu it opens is never cut off by it. */ .app-header { position: sticky; top: 0; z-index: 40; border-bottom: var(--border-width) solid var(--color-border); background: var(--color-surface-raised); } .app-header__inner, .app-main { width: min(100%, var(--content-max)); margin: 0 auto; padding: 0 var(--space-4); } .app-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); } .brand { display: inline-flex; min-height: 44px; flex: none; align-items: center; gap: var(--space-3); text-decoration: none; } .brand__mark { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--color-primary); border-radius: 10px; color: var(--color-primary); font-weight: 700; } /* Balance, switcher and (unscoped only) theme button read as one cluster and wrap as one, so a header too narrow for them all still ends with them against the right edge -- and with the menu that opens under them fully on screen. */ .app-header__controls { display: flex; min-width: 0; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-left: auto; } .brand__name { font-size: 1.25rem; font-weight: 700; } .primary-nav { display: flex; flex: 1 1 100%; order: 3; align-items: stretch; gap: var(--space-2); margin-bottom: calc(-1 * var(--space-3)); overflow-x: auto; } .primary-nav__link { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); border-bottom: 3px solid transparent; color: var(--color-ink-muted); font-size: 0.9375rem; font-weight: 600; text-align: center; text-decoration: none; white-space: nowrap; } .primary-nav__link:hover { color: var(--color-ink); } .primary-nav__link--active { border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 700; } /* The label alone carries the header nav; the icon is there for the bottom bar below, where four words in a row would read as loose text rather than as destinations. */ .primary-nav__icon { display: none; } /* Narrow screens: the four destinations leave the header for a bar pinned to the bottom of the viewport, within reach of a thumb and out of the way of a header that has no width to spare. Everything that also lives against the bottom edge -- the page's own padding, the floating action buttons -- makes room for it. */ @media (max-width: 639px) { .primary-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; gap: 0; margin-bottom: 0; padding: var(--space-1) var(--space-2); padding-bottom: max(var(--space-1), env(safe-area-inset-bottom)); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface-raised); overflow-x: visible; } .primary-nav__link { min-width: 0; flex: 1 1 0; flex-direction: column; gap: 2px; padding: var(--space-1) var(--space-2); border-bottom: 0; border-radius: var(--radius-input); font-size: 0.75rem; } .primary-nav__icon { display: inline-flex; } .primary-nav__icon .icon { width: 22px; height: 22px; } /* No underline to sit on down here, so the tinted tile carries the current page instead. */ .primary-nav__link--active { background: var(--tint-primary-bg); color: var(--tint-primary-ink); } } .balance-pill { display: inline-flex; min-height: 44px; flex: none; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--tp-radius-pill); background: var(--color-surface-raised); color: var(--color-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .balance-pill:hover { border-color: var(--color-border-strong); } .balance-pill__icon { display: inline-flex; flex: none; color: var(--color-reward); } .balance-pill__icon .icon { width: 18px; height: 18px; } .balance-pill__value { font-weight: 700; font-variant-numeric: tabular-nums; } .balance-pill__unit { color: var(--color-ink-muted); } /* Light/dark toggle. It normally rides in the household menu with the other account-level choices (see below); only the pages without that menu still render it in the header, where it is sized and outlined like the pills beside it but round and icon-only, so it takes as little width as it deserves. */ .theme-toggle--icon { display: inline-grid; width: 44px; height: 44px; flex: none; place-items: center; padding: 0; border: var(--border-width) solid var(--color-border); border-radius: 50%; background: var(--color-surface-raised); color: var(--color-ink-muted); cursor: pointer; } .theme-toggle--icon:hover { border-color: var(--color-border-strong); color: var(--color-ink); } .theme-toggle--icon .icon { width: 20px; height: 20px; } /* Inside the menu it is a row like any other, so its icon borrows the tile the sibling rows put their glyphs in. Deliberately no display of its own: which of the two icons shows is settled by the pair of rules below. */ .theme-toggle--menu .theme-toggle__icon { width: 28px; height: 28px; flex: none; place-items: center; border-radius: 50%; background: var(--tp-icon-tile); color: var(--color-primary); } .theme-toggle--menu .theme-toggle__icon .icon { width: 18px; height: 18px; } /* The button offers the theme it would switch to rather than reporting the one in force, so the icon is the destination: a moon while the page is light. */ .theme-toggle .theme-toggle__icon { display: none; } .theme-toggle[data-theme="light"] .theme-toggle__icon--dark, .theme-toggle[data-theme="dark"] .theme-toggle__icon--light { display: inline-grid; } /* The only header control allowed to give up width: a long Household name should shorten to keep the row on one line rather than force the whole cluster onto a second one. */ .household-switcher { position: relative; min-width: 0; flex: 0 1 auto; } .household-switcher > summary { list-style: none; cursor: pointer; } .household-switcher > summary::-webkit-details-marker { display: none; } .household-pill { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--tp-radius-pill); background: var(--color-surface-raised); font-size: 0.9375rem; font-weight: 600; } .household-pill__name { min-width: 2ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .household-pill__avatar { display: inline-grid; flex: none; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--tp-icon-tile); color: var(--color-primary); font-size: 0.8125rem; font-weight: 700; } .household-pill__chevron { width: 18px; height: 18px; flex: none; color: var(--color-ink-muted); } .household-switcher[open] .household-pill__chevron { transform: rotate(180deg); } /* Hangs from the right edge of its pill, which sits at the right edge of the header -- so the menu grows leftwards into the page rather than off it. The viewport cap is the backstop for the narrowest screens, where 220px of menu plus the page's own gutters is already most of the width there is. */ .household-switcher__menu { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30; display: grid; gap: var(--space-1); min-width: 220px; max-width: calc(100vw - var(--space-6)); padding: var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-surface-raised); } .household-switcher__group { display: grid; gap: var(--space-1); } .household-switcher__group + .household-switcher__group { margin-top: var(--space-1); padding-top: var(--space-1); border-top: var(--border-width) solid var(--color-border); } .household-switcher__link { display: flex; width: 100%; min-height: 44px; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-input); background: none; color: var(--color-ink); font: inherit; font-size: 0.9375rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; } .household-switcher__link:hover { background: var(--color-surface-muted); } .household-switcher__link--active { background: var(--color-surface-muted); color: var(--color-primary); } .app-main { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-10); } .page-intro { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--color-border); } .eyebrow, .meta-text { margin: 0; color: var(--color-ink-muted); font-size: 0.875rem; } .eyebrow { color: var(--color-primary); font-weight: 700; text-transform: uppercase; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-family: var(--tp-font-display); font-size: 2rem; line-height: 1.15; } h2 { margin-bottom: var(--space-2); font-size: 1rem; line-height: 1.3; } .page-intro__text { max-width: 62ch; margin-bottom: 0; color: var(--color-ink-muted); font-size: 1.0625rem; } .button { display: inline-flex; min-height: 44px; width: fit-content; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); border: var(--border-width) solid transparent; border-radius: var(--tp-radius-pill); font-weight: 700; text-decoration: none; } .button--primary { border-color: var(--color-primary); background: var(--color-primary); color: var(--tp-primary-ink); } .button--secondary { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-primary); } .button--danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-danger-ink); } .button--danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); } .button--danger:focus-visible { outline: 3px solid var(--color-danger-ring); outline-offset: 2px; } .button--danger:disabled, .button--danger[aria-disabled='true'] { cursor: not-allowed; opacity: .65; } .button:disabled, .button[aria-disabled="true"] { border-color: var(--color-border); background: var(--color-surface-muted); color: var(--color-ink-muted); cursor: not-allowed; } .task-type-choice { display: flex; flex-wrap: wrap; gap: var(--space-3); } .account-state { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .account-state p { max-width: 64ch; margin-bottom: 0; color: var(--color-ink-muted); } .household-form { display: grid; gap: var(--space-3); max-width: 420px; } .field { display: grid; gap: var(--space-2); } .field__label { color: var(--color-ink); font-weight: 700; } .field__input { min-height: 44px; width: 100%; padding: var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-input); color: var(--color-ink); font: inherit; } .field--checkbox .field__label { display: flex; min-height: 44px; align-items: center; gap: var(--space-3); font-weight: 700; } .field--checkbox input[type='checkbox'] { width: 24px; height: 24px; } .form-error { color: var(--color-danger); font-weight: 700; } .form-warning { padding: var(--space-3); border: var(--border-width) solid var(--color-warning); border-radius: var(--radius-card); color: var(--color-ink); background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface-raised)); } .form-warning[hidden] { display: none; } .form-warning p { margin-bottom: 0; } .setup-prompts { display: grid; gap: var(--space-4); } .setup-prompt { display: grid; gap: var(--space-4); align-items: start; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-muted); } .setup-prompt h2 { margin-bottom: var(--space-2); } .setup-prompt p { max-width: 64ch; margin-bottom: 0; color: var(--color-ink-muted); } /* Keeps a prompt offering more than one destination to a single grid column. */ .setup-prompt__affordances { display: flex; flex-wrap: wrap; gap: var(--space-2); } .setup-prompt__affordance { display: inline-flex; min-height: 44px; width: fit-content; align-items: center; justify-content: center; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--tp-radius-pill); background: var(--color-surface-raised); color: var(--color-ink-muted); font: inherit; font-weight: 700; text-decoration: none; } .setup-prompt__affordance:hover { border-color: var(--color-border-strong); color: var(--color-ink); } button.setup-prompt__affordance { cursor: pointer; } .surface-list { display: grid; gap: var(--space-4); } .member-list__items { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .member-list__item { display: flex; min-height: 44px; align-items: center; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .member-list__item[aria-current="true"] { border-color: var(--color-primary); } .member-list__label { font-weight: 600; } .member-identity { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; } .member-identity__avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--color-surface-muted); border: var(--border-width) solid var(--color-border); } .member-identity__avatar--initials { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--color-ink-muted); text-transform: uppercase; } .member-identity--current .member-identity__avatar { border-color: var(--color-primary); } .member-identity__name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; } .member-identity__you { flex: none; padding: 2px var(--space-2); border-radius: var(--radius-input); background: var(--color-surface-muted); color: var(--color-ink-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .surface-item { padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .surface-item p { margin-bottom: 0; color: var(--color-ink-muted); } .action-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); } .detail-line { display: flex; align-items: center; gap: var(--space-2); } .edit-icon { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--tp-radius-pill); color: var(--color-primary); } .edit-icon__glyph { width: 1.15rem; height: 1.15rem; } .action-note { margin-top: var(--space-3); } .reward-dialog { width: min(100% - var(--space-8), 480px); padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-surface-raised); color: var(--color-ink); } .confirmation-dialog { width: min(100% - var(--space-8), 480px); padding: var(--space-5); border: var(--border-width) solid var(--color-danger); border-radius: var(--radius-card); background: var(--color-surface-raised); color: var(--color-ink); } .confirmation-dialog::backdrop { background: var(--color-scrim); } .confirmation-dialog p { margin-bottom: var(--space-2); color: var(--color-ink-muted); } .tasks-fab, .rewards-fab { position: fixed; right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom)); z-index: 20; display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: var(--border-width) solid var(--color-border-strong); border-radius: 50%; background: var(--color-primary); color: var(--color-surface-raised); font-size: 1.5rem; font-weight: 700; text-decoration: none; } .tasks-fab:hover, .tasks-fab:focus-visible, .rewards-fab:hover, .rewards-fab:focus-visible { background: var(--color-primary-hover); } .reward-dialog::backdrop { background: var(--color-scrim); } .reward-dialog p { margin-bottom: var(--space-2); color: var(--color-ink-muted); } .reward-dialog p.reward-dialog__borrow { color: var(--color-warning); } .balance-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); } .balance-chip { display: grid; gap: var(--space-1); min-width: 140px; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-muted); } .balance-chip--current { border-color: var(--color-primary); } /* In a detail-page aside the chips stack, so let them fill the column. */ .detail-card .balance-chip { flex: 1 1 140px; } .balance-chip__label { margin: 0; color: var(--color-ink-muted); font-size: 0.875rem; } .balance-chip__value { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; } /* Points Ledger ---------------------------------------------------------- Balances lead as cards -- the viewer's own carries the Household accent so they can find it without reading -- and the history below is one dated stream inside a single panel rather than a stack of loose cards. The tinted glyphs mean what they mean on the Activity timeline (Task green, Reward purple), and every signed amount sits in the same right-hand column so a Member can run their eye down it. */ .ledger-intro { gap: var(--space-5); } .ledger-intro__heading { display: grid; gap: var(--space-2); } /* One bar, three facts: what the ledger holds, and where those Points went. */ .ledger-metrics { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); list-style: none; } .ledger-metric { display: flex; min-width: 0; flex: 1 1 45%; align-items: center; gap: var(--space-2); } .ledger-metric__icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; margin-right: var(--space-1); border-radius: 50%; } .ledger-metric__icon .icon { width: 18px; height: 18px; } .ledger-metric__icon--entries { background: var(--tint-primary-bg); color: var(--tint-primary-ink); } .ledger-metric__icon--added { background: var(--tp-points-bg); color: var(--tp-points-ink); } .ledger-metric__icon--redeemed { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .ledger-metric__value { font-family: var(--tp-font-display); font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .ledger-metric__label { min-width: 0; color: var(--color-ink-muted); font-size: 0.875rem; } /* Hairlines only once the three sit on one line; a wrapped pair reads better without them. */ @media (min-width: 640px) { .ledger-metric { flex: 1 1 0; } .ledger-metric + .ledger-metric { padding-left: var(--space-4); border-left: var(--border-width) solid var(--color-border); } } .ledger-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); } .ledger-balance { display: grid; align-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } /* The viewer's own card: the accent border and tint the rest of the app uses for "this is yours" -- no shadow, the surfaces here stay flat. */ .ledger-balance--current { padding: calc(var(--space-4) - 1px) calc(var(--space-5) - 1px); border: 2px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-raised)); } .ledger-balance__member { margin: 0; min-width: 0; } .ledger-balance__figure { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; } .ledger-balance__icon { display: inline-flex; flex: none; align-self: center; color: var(--tp-star); } .ledger-balance__icon .icon { width: 20px; height: 20px; } .ledger-balance__value { color: var(--color-primary); font-family: var(--tp-font-display); font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .ledger-balance__unit { color: var(--color-ink-muted); font-weight: 700; } /* A balance below zero is a fact, not a failing: it is marked, not alarmed. */ .ledger-balance__figure--below-zero .ledger-balance__value { color: var(--color-warning); } .ledger-history { display: grid; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .ledger-history__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .ledger-history__head h2 { margin-bottom: 0; } .ledger-history__sort { margin: 0; color: var(--color-ink-subtle); font-size: 0.8125rem; font-weight: 600; } .ledger-empty { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-surface-muted); text-align: center; } .ledger-empty__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--color-surface-raised); color: var(--color-ink-subtle); } .ledger-empty p { margin: 0; font-weight: 600; } .ledger-empty__hint { color: var(--color-ink-muted); font-size: 0.875rem; font-weight: 400; } .ledger-list { display: grid; margin: 0; padding: 0; list-style: none; } /* The date sets the stream's rhythm; the rule runs out to the panel edge so each day reads as its own stretch without boxing the rows in. */ .ledger-day { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); padding-bottom: var(--space-1); color: var(--color-ink-subtle); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .ledger-day:first-child { padding-top: 0; } .ledger-day::after { content: ""; flex: 1; height: 1px; background: var(--color-border); } .ledger-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; } .ledger-row + .ledger-row { border-top: var(--border-width) solid var(--color-border); } .ledger-row__icon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: var(--space-2); background: var(--color-surface-muted); color: var(--color-ink-muted); } .ledger-row__icon .icon { width: 20px; height: 20px; } .ledger-row__icon--task { background: var(--tint-success-bg); color: var(--tint-success-ink); } .ledger-row__icon--approval { background: var(--tint-info-bg); color: var(--tint-info-ink); } .ledger-row__icon--reward { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .ledger-row__icon--general { background: var(--color-surface-muted); color: var(--color-ink-muted); } .ledger-row__body { display: grid; gap: 2px; min-width: 0; } .ledger-row__source { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .ledger-row__summary { margin: 0; color: var(--color-ink-muted); font-size: 0.875rem; overflow-wrap: anywhere; } .ledger-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; margin-top: var(--space-1); } .ledger-row__meta .member-identity__name { font-size: 0.875rem; font-weight: 600; } .ledger-row__meta .member-identity__avatar { width: 22px; height: 22px; } .ledger-row__time { color: var(--color-ink-subtle); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .ledger-row__amount { margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--color-surface-muted); color: var(--color-ink-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .ledger-row__amount--added { background: var(--tp-available-bg); color: var(--tp-available-ink); } .ledger-row__amount--redeemed { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } /* Narrow screens: the amount drops under the copy so neither gets squeezed. */ @media (max-width: 479px) { .ledger-row { grid-template-columns: auto minmax(0, 1fr); } .ledger-row__amount { grid-column: 2; justify-self: start; } } .recent-activity, .activity-empty { display: grid; gap: var(--space-4); } /* Activity header and filters -------------------------------------------- The timeline is what Members came for, so the page above it stays quiet: the totals read as one line of facts under the title, and filtering is a single row of controls. The rarely-touched filters wait behind a disclosure rather than taking a card's worth of the first screen. */ .activity-intro__heading { display: grid; gap: var(--space-4); } /* One bar, four facts: the tinted glyphs carry the same meaning here as they do in the timeline below (Task green, Points amber, Reward purple). */ .activity-metrics { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); list-style: none; } .activity-metric { display: flex; min-width: 0; flex: 1 1 45%; align-items: center; gap: var(--space-2); } .activity-metric__icon { display: grid; width: 32px; height: 32px; flex: none; place-items: center; margin-right: var(--space-1); border-radius: 50%; } .activity-metric__icon .icon { width: 18px; height: 18px; } .activity-metric__icon--events { background: var(--tint-primary-bg); color: var(--tint-primary-ink); } .activity-metric__icon--completed { background: var(--tint-success-bg); color: var(--tint-success-ink); } .activity-metric__icon--awarded { background: var(--tp-points-bg); color: var(--tp-points-ink); } .activity-metric__icon--spent { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .activity-metric__value { font-family: var(--tp-font-display); font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .activity-metric__label { min-width: 0; color: var(--color-ink-muted); font-size: 0.875rem; } /* Four across only once each has room for its label; a 2x2 grid until then. */ @media (min-width: 760px) { .activity-metric { flex: 1 1 0; } /* Hairlines only once the four sit on one line; wrapped pairs read better without. */ .activity-metric + .activity-metric { padding-left: var(--space-4); border-left: var(--border-width) solid var(--color-border); } } .activity-filters, .activity-filters__form { display: grid; gap: var(--space-3); margin: 0; } .activity-filters__alert { padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-danger); border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-raised)); } .activity-filters__alert p { margin: 0; } .activity-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .activity-toolbar__control { min-width: 0; flex: 1 1 160px; } .activity-toolbar__select { min-height: 40px; padding: var(--space-2) var(--space-3); border-color: var(--color-border); border-radius: var(--tp-radius-pill); background: var(--color-surface-raised); font-size: 0.9375rem; } .activity-toolbar__apply { min-height: 40px; padding: var(--space-2) var(--space-5); } .activity-toolbar__clear { display: inline-flex; min-height: 40px; align-items: center; padding: 0 var(--space-2); color: var(--color-primary); font-size: 0.875rem; font-weight: 700; } .activity-toolbar__errors { display: grid; gap: var(--space-1); } .activity-advanced__summary { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); color: var(--color-primary); cursor: pointer; font-size: 0.875rem; font-weight: 700; list-style: none; } .activity-advanced__summary::-webkit-details-marker { display: none; } .activity-advanced__summary::after { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: translateY(-2px) rotate(45deg); } .activity-advanced[open] .activity-advanced__summary::after { transform: translateY(2px) rotate(-135deg); } .activity-advanced__grid { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .activity-advanced__hint { margin: 0 0 var(--space-3); color: var(--color-ink-muted); font-size: 0.8125rem; } .activity-applied__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .activity-applied__chip { padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--color-surface-muted); color: var(--color-ink-muted); font-size: 0.8125rem; } @media (min-width: 640px) { .activity-advanced__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Household Home --------------------------------------------------------- A dashboard rather than a page of sections: the hero answers "where do I stand" (balance, distance to the next Reward, what today added), and the panels below answer "what do I do next". */ .home-hero { display: grid; gap: var(--space-4); align-items: stretch; } .home-hero__identity { display: grid; gap: var(--space-2); align-content: center; min-width: 0; } .home-card, .home-panel { display: grid; align-content: start; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .home-card { gap: var(--space-3); } .home-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .home-balance { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .home-balance__figure { display: grid; margin: 0; } .home-balance__value { color: var(--color-primary); font-family: var(--tp-font-display); font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .home-balance__unit { color: var(--color-ink-muted); font-weight: 700; } /* Ring drawn with a conic gradient; the inner disc punches out the centre so the figure stays legible without a second element. */ .home-dial { position: relative; display: grid; flex: none; width: 96px; height: 96px; place-content: center; border-radius: 50%; background: conic-gradient( var(--color-primary) var(--home-dial-fill, 0%), var(--color-surface-muted) 0 ); text-align: center; } .home-dial::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--color-surface-raised); } .home-dial__value, .home-dial__caption { position: relative; line-height: 1.2; } .home-dial__value { font-variant-numeric: tabular-nums; font-weight: 700; } .home-dial__caption { max-width: 66px; color: var(--color-ink-muted); font-size: 0.625rem; } .home-balance__target { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--tp-available-bg); color: var(--tp-available-ink); font-size: 0.875rem; } .home-balance__target a { font-weight: 700; } .home-balance__target-icon { display: inline-flex; flex: none; color: var(--tp-star); } .home-balance__target-icon .icon { width: 18px; height: 18px; } .home-card__link, .home-panel__link { color: var(--color-primary); font-size: 0.875rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .home-card__link:hover, .home-panel__link:hover { text-decoration: underline; } .home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .home-stat { display: grid; justify-items: center; gap: var(--space-1); text-align: center; } .home-stat__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; } .home-stat__icon .icon { width: 20px; height: 20px; } .home-stat__icon--task { background: var(--tint-success-bg); color: var(--tint-success-ink); } .home-stat__icon--points { background: var(--tp-points-bg); color: var(--tp-points-ink); } .home-stat__icon--reward { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .home-stat__value { font-family: var(--tp-font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .home-stat__label { color: var(--color-ink-muted); font-size: 0.8125rem; } .home-panel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); } .home-panel__head h2 { margin-bottom: 0; } .home-panel__empty { margin: 0; color: var(--color-ink-muted); } /* The Activity table brings its own card chrome; inside a panel it would read as a box in a box. */ .home-panel > .activity-log { border: 0; } .home-highlights { display: grid; gap: var(--space-6); } /* Rows inside a panel: hairline separated, no chrome of their own. */ .highlight-list { display: grid; margin: 0; padding: 0; list-style: none; } .highlight-list > li + li { border-top: var(--border-width) solid var(--color-border); } .highlight-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-radius: var(--radius-input); color: inherit; text-decoration: none; } .highlight-item:hover, .highlight-item:focus-visible { background: var(--color-surface-muted); } .highlight-item__icon { display: grid; flex-shrink: 0; width: 40px; height: 40px; place-items: center; border-radius: var(--space-2); background: var(--tp-surface-alt); color: var(--tp-primary); font-family: var(--tp-font-display); font-weight: 700; } .highlight-item__icon--emoji { font-family: var(--font-system); font-weight: 400; font-size: 1.35rem; } .highlight-item__body { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; } .highlight-item__name { overflow-wrap: anywhere; font-weight: 700; } .highlight-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .highlight-item__note { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-ink-muted); font-size: 0.8125rem; } .highlight-item__note-icon { display: inline-flex; flex: none; } .highlight-item__note-icon .icon { width: 14px; height: 14px; } .highlight-item__chip { padding: 0 var(--space-2); border-radius: var(--tp-radius-pill); background: var(--tint-info-bg); color: var(--tint-info-ink); font-size: 0.75rem; font-weight: 700; } .highlight-item__points { flex: none; padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--tp-points-bg); color: var(--tp-points-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Pending Changes at Home's altitude. The row borrows the decision surfaces' own headline -- name, chip, and the before-and-after of the change -- but carries no decide buttons: it is a link to the surface that decides. */ .home-pending__lead { margin: var(--space-1) 0 0; color: var(--color-ink-muted); font-size: 0.9375rem; } .home-pending__item .pending-card__change { flex: none; } .home-pending__chevron { flex: none; width: 20px; height: 20px; color: var(--color-ink-muted); } /* Narrow enough that the name and the change pair cannot share a line: the values drop below, indented past the tile so the name still leads. */ @media (max-width: 560px) { .home-pending__item { flex-wrap: wrap; } .home-pending__item .pending-card__change { flex: 1 0 100%; padding-left: calc(40px + var(--space-3)); } } /* The closest Reward gets the whole story: how far along, how far left. */ .reward-feature { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-muted); color: inherit; text-decoration: none; } .reward-feature:hover, .reward-feature:focus-visible { border-color: var(--color-primary); } .reward-feature__head { display: flex; align-items: center; gap: var(--space-3); } .reward-feature__name { font-size: 1.25rem; } .reward-feature__art { display: inline-flex; width: 56px; height: 56px; flex: none; align-items: center; justify-content: center; margin-left: auto; border-radius: var(--radius-card); background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .reward-feature__art .icon { width: 30px; height: 30px; } .reward-feature__bar { display: block; height: 10px; overflow: hidden; border-radius: var(--tp-radius-pill); background: var(--color-border); } .reward-feature__fill { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); } .reward-feature__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--color-ink-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .reward-feature__legend strong { color: var(--color-ink); } /* Activity ledger table -------------------------------------------------- */ .activity-history { display: grid; gap: var(--space-4); min-width: 0; } .activity-log { width: 100%; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); /* Rounded corners need the overflow clipped; keeps long copy inside the card. */ overflow: hidden; } /* Mobile-first: the table collapses to a stack of self-contained cards. */ .activity-log, .activity-log tbody, .activity-log tr, .activity-log td { display: block; } .activity-log__head { display: none; } .activity-log__day th { display: block; padding: var(--space-3) var(--space-4); background: var(--color-surface-muted); color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 700; text-align: left; } .activity-log__row { display: grid; gap: var(--space-2); padding: var(--space-4); border-top: var(--border-width) solid var(--color-border); } .activity-log__cell { min-width: 0; padding: 0; } .activity-log__timewrap { display: flex; align-items: center; gap: var(--space-2); } .activity-log__dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--color-ink-subtle); } .activity-log__dot--success { background: var(--tp-available); } .activity-log__dot--info { background: var(--tint-info-ink); } .activity-log__time { color: var(--color-ink-subtle); font-size: 0.875rem; font-variant-numeric: tabular-nums; } .activity-log__itemwrap { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .activity-log__icon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: var(--space-2); background: var(--color-surface-muted); color: var(--color-ink-muted); } .activity-log__icon .icon { width: 20px; height: 20px; } .activity-log__icon--task { background: var(--tint-success-bg); color: var(--tint-success-ink); } .activity-log__icon--approval { background: var(--tint-info-bg); color: var(--tint-info-ink); } .activity-log__icon--claim { background: var(--tp-points-bg); color: var(--tp-points-ink); } .activity-log__icon--reward { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .activity-log__icon--member { background: var(--tint-neutral-bg); color: var(--tint-neutral-ink); } .activity-log__icon--general { background: var(--color-surface-muted); color: var(--color-ink-muted); } .activity-log__item { display: grid; min-width: 0; gap: 2px; } .activity-log__name { font-weight: 700; overflow-wrap: anywhere; } .activity-log__kind { color: var(--color-ink-subtle); font-size: 0.8125rem; } .activity-log__change { display: block; font-weight: 600; overflow-wrap: anywhere; } .activity-log__copy { display: block; margin-top: 2px; color: var(--color-ink-muted); font-size: 0.875rem; overflow-wrap: anywhere; } .activity-log__status { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--color-surface-muted); color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; } .activity-log__status--success { background: var(--tp-available-bg); color: var(--tp-available-ink); } .activity-log__status--info { background: var(--tint-info-bg); color: var(--tint-info-ink); } .activity-log__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: 0 var(--space-1); color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 600; } .activity-log__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); } .activity-log__legend-icon { display: inline-flex; color: var(--color-ink-muted); } .activity-log__legend-icon .icon { width: 16px; height: 16px; } .activity-log__legend-sort { margin-left: auto; color: var(--color-ink-subtle); } @media (min-width: 640px) { .activity-log { display: table; border-collapse: collapse; } .activity-log tbody { display: table-row-group; } .activity-log__head { display: table-header-group; } .activity-log tr { display: table-row; } .activity-log__day th { display: table-cell; } .activity-log__col { padding: var(--space-3) var(--space-4); color: var(--color-ink-subtle); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; } /* Match the mobile base selector's specificity so the cells become table cells again instead of collapsing into one anonymous cell. */ .activity-log td { display: table-cell; } .activity-log__cell { padding: var(--space-4); border-top: var(--border-width) solid var(--color-border); vertical-align: top; } .activity-log__cell--time, .activity-log__cell--status, .activity-log__cell--by { width: 1%; white-space: nowrap; } .activity-log__cell--item { width: 26%; } } @media (min-width: 640px) { .app-header__inner, .app-main { padding-right: var(--space-6); padding-left: var(--space-6); } .surface-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .home-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The household name reads as a page title until there is room to sit it beside the two summary cards. */ .home-hero__identity { grid-column: 1 / -1; } .setup-prompt { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .primary-nav { flex: 1 1 auto; order: 0; margin-bottom: calc(-1 * var(--space-3)); } } @media (min-width: 1024px) { .primary-nav { justify-content: center; gap: var(--space-5); } .app-main { gap: var(--space-8); padding-top: var(--space-10); } h1 { font-size: 2.5rem; } .home-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.15fr); } .home-hero__identity { grid-column: auto; } } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tasks-hero, .rewards-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .tasks-hero__title, .rewards-hero__title { font-family: var(--tp-font-display); font-size: clamp(2rem, 4vw, 2.75rem); color: var(--tp-ink); } .tasks-hero__create, .rewards-hero__create { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: var(--border-width) solid var(--tp-primary); border-radius: var(--tp-radius-pill); background: var(--tp-primary); color: var(--tp-primary-ink); font-weight: 700; text-decoration: none; white-space: nowrap; } /* Pending Changes --------------------------------------------------------- The decisions a Household has not settled, above the list they will land in. The region carries the heading and the count; each card is a
whose summary is the headline a reviewer decides from, with the facts they only sometimes want behind the chevron. The decide buttons sit outside that disclosure so a click on them never toggles it. */ .pending-changes { display: grid; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--tp-border); } .pending-changes__title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; font-family: var(--tp-font-display); font-size: 1.375rem; } .pending-changes__count { display: inline-grid; min-width: 26px; height: 26px; place-items: center; padding: 0 var(--space-2); border-radius: var(--tp-radius-pill); background: var(--tp-points-bg); color: var(--tp-points-ink); font-size: 0.8125rem; font-weight: 700; } .pending-changes__lead { margin: var(--space-1) 0 0; color: var(--tp-ink-muted); font-size: 0.9375rem; } .pending-changes__list { display: grid; gap: var(--space-3); } .pending-card { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: var(--border-width) solid var(--pending-border); border-left: 4px solid var(--pending-rail); border-radius: var(--tp-radius-card); background: var(--pending-bg); } .pending-card__summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); cursor: pointer; /* The chevron replaces the default disclosure triangle; this rule and the -webkit one below are the two halves of removing it. */ list-style: none; } .pending-card__summary::-webkit-details-marker { display: none; } .pending-card__summary:focus-visible { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-input); } .pending-card__tile { display: grid; flex-shrink: 0; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: var(--tp-primary); font-family: var(--tp-font-display); font-weight: 700; } .pending-card__headline { display: grid; flex: 1 1 12rem; gap: var(--space-1); } .pending-card__namerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .pending-card__name { font-weight: 700; } .pending-card__chip { padding: 1px var(--space-2); border-radius: var(--tp-radius-pill); font-size: 0.75rem; font-weight: 700; } .pending-card__chip--points { background: var(--tp-points-bg); color: var(--tp-points-ink); } .pending-card__chip--new { background: var(--tint-info-bg); color: var(--tint-info-ink); } .pending-card__chip--completion { background: var(--tint-success-bg); color: var(--tint-success-ink); } .pending-card__meta { color: var(--tp-ink-muted); font-size: 0.875rem; } .pending-card__change { display: flex; align-items: center; gap: var(--space-3); } .pending-card__side { display: grid; gap: 2px; } .pending-card__side-label { color: var(--tp-ink-muted); font-size: 0.8125rem; } .pending-card__side-value { font-weight: 700; white-space: nowrap; } .pending-card__side-value--proposed { color: var(--color-warning); } .pending-card__arrow, .pending-card__chevron { width: 20px; height: 20px; color: var(--tp-ink-subtle); } .pending-card__toggle { display: grid; margin-left: auto; place-items: center; } .pending-card__chevron { transform: rotate(90deg); } .pending-card__disclosure[open] > .pending-card__summary .pending-card__chevron { transform: rotate(-90deg); } @media (prefers-reduced-motion: no-preference) { .pending-card__chevron { transition: transform 150ms ease; } } .pending-card__facts { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width) solid var(--pending-border); color: var(--tp-ink-muted); font-size: 0.875rem; } .pending-card__facts p { margin-bottom: 0; } .pending-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .pending-card__btn, .pending-card__reject { min-height: 40px; padding: var(--space-2) var(--space-4); } .pending-card__stamp { margin-bottom: 0; color: var(--tp-ink-subtle); font-size: 0.8125rem; } /* Wide enough for the decide buttons to sit beside the headline rather than under it; the stamp then tucks under the buttons, out of the reading path. */ @media (min-width: 820px) { .pending-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "summary actions" "stamp stamp"; align-items: center; gap: var(--space-2) var(--space-5); } .pending-card__disclosure { grid-area: summary; } .pending-card__actions { grid-area: actions; } .pending-card__stamp { grid-area: stamp; text-align: right; } .pending-card__change { flex: 0 0 auto; margin-right: var(--space-4); } } .tasks-stats { display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--border-width) solid var(--tp-border); border-radius: var(--tp-radius-card); background: var(--tp-surface); } .tasks-stat { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-width) solid var(--tp-border); } .tasks-stat:first-child { padding-top: 0; border-top: none; } .tasks-stat__icon { position: relative; display: grid; flex-shrink: 0; width: 56px; height: 56px; place-items: center; } .tasks-stat__ring-value { position: absolute; font-family: var(--tp-font-display); font-size: 1.375rem; font-weight: 700; } .tasks-stat__badge { display: grid; width: 100%; height: 100%; place-items: center; border-radius: 50%; background: var(--tp-surface-alt); font-size: 1.375rem; } .tasks-stat__badge--points { background: var(--tp-points-bg); color: var(--tp-star); } .tasks-stat__value { font-family: var(--tp-font-display); font-size: 1.375rem; font-weight: 700; } .tasks-stat__label { margin: 0; font-weight: 600; } .tasks-stat__sublabel { margin: 0; color: var(--tp-ink-muted); font-size: 0.875rem; } .tasks-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .tasks-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .tasks-segmented { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: var(--border-width) solid var(--tp-border); border-radius: var(--tp-radius-pill); background: var(--tp-surface); } .tasks-segmented__btn { min-height: 36px; padding: var(--space-2) var(--space-4); border: none; border-radius: var(--tp-radius-pill); background: transparent; color: var(--tp-ink-muted); font: inherit; font-weight: 600; } .tasks-segmented__btn[aria-pressed="true"] { background: var(--tp-primary); color: var(--tp-primary-ink); } .tasks-dropdown { display: inline-flex; min-height: 36px; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--tp-border); border-radius: var(--tp-radius-pill); background: var(--tp-surface); color: var(--tp-ink-muted); font: inherit; font-weight: 600; } .tasks-dropdown[aria-disabled="true"] { cursor: not-allowed; } .tasks-table { border: var(--border-width) solid var(--tp-border); border-radius: var(--tp-radius-card); background: var(--tp-surface); } .tasks-table__header { display: none; padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--tp-border); color: var(--tp-ink-muted); font-size: 0.8125rem; font-weight: 700; } .tasks-table__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--tp-border); } .tasks-table__row:last-child { border-bottom: none; } .tasks-table__cell--task, .tasks-table__cell--actions { flex: 1 1 100%; } .tasks-table__cell--task { display: flex; align-items: center; gap: var(--space-3); } .tasks-row__icon, .rewards-row__icon { display: grid; flex-shrink: 0; width: 44px; height: 44px; place-items: center; border-radius: var(--space-2); background: var(--tp-surface-alt); color: var(--tp-primary); font-family: var(--tp-font-display); font-weight: 700; } .tasks-row__name, .rewards-row__name { margin: 0; font-family: var(--tp-font-display); font-size: 1.0625rem; } .tasks-row__type-icon { display: inline-block; margin-left: var(--space-1); color: var(--tp-ink-muted); font-family: var(--font-system); font-size: 0.875rem; vertical-align: middle; } .tasks-row__type-icon--recurring { color: var(--tp-primary); } .tasks-points, .rewards-points { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--tp-points-bg); color: var(--tp-points-ink); font-weight: 700; white-space: nowrap; } .tasks-points__star, .rewards-points__star { color: var(--tp-star); } .tasks-status { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--tp-ink); font-weight: 600; } .tasks-status__dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--tp-ink-muted); } .tasks-status__dot--available { background: var(--tp-available); } .tasks-status__dot--claimed_by_self { background: var(--tp-claimed-self); } .tasks-status__dot--claimed_by_other { background: var(--tp-claimed-other); } .tasks-cooldown { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--color-surface-muted); color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .tasks-cooldown__icon { width: 14px; height: 14px; flex-shrink: 0; } .tasks-table__cell--actions .action-row, .rewards-table__cell--actions .action-row { margin-top: 0; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .tasks-row__buttons, .rewards-row__buttons { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; } .tasks-btn, .rewards-btn { min-height: 36px; padding: var(--space-2) var(--space-4); border-radius: var(--tp-radius-pill); font-size: 0.9375rem; } .tasks-btn--primary, .rewards-btn--primary { border-color: var(--tp-primary); background: var(--tp-primary); color: var(--tp-primary-ink); } .tasks-btn--secondary, .rewards-btn--secondary { border-color: var(--tp-border); background: var(--tp-surface); color: var(--tp-ink); } /* The details link is the last thing in the actions cell, and the cell is the last column -- so margin-left auto parks it on the row's trailing edge whatever mix of buttons sits to its left. */ .tasks-row__chevron, .rewards-row__chevron { display: inline-grid; flex-shrink: 0; width: 36px; height: 36px; margin-left: auto; place-items: center; border-radius: 50%; color: var(--tp-ink-muted); text-decoration: none; font-size: 1.7rem; } .tasks-row__value-change { color: var(--tp-ink-muted); font-size: 0.8125rem; text-decoration: underline; } .tasks-table__note { padding-top: var(--space-3); } .tasks-table__empty { display: grid; gap: var(--space-3); padding: var(--space-8) var(--space-5); text-align: center; justify-items: center; } .tasks-table__empty h2 { font-family: var(--tp-font-display); } .rewards-table { border: var(--border-width) solid var(--tp-border); border-radius: var(--tp-radius-card); background: var(--tp-surface); } .rewards-table__header { display: none; padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--tp-border); color: var(--tp-ink-muted); font-size: 0.8125rem; font-weight: 700; } .rewards-table__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--tp-border); } .rewards-table__row:last-child { border-bottom: none; } .rewards-table__cell--reward, .rewards-table__cell--actions { flex: 1 1 100%; } .rewards-table__cell--reward { display: flex; align-items: center; gap: var(--space-3); } .rewards-status { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--tp-ink); font-weight: 600; } .rewards-status__dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--tp-ink-muted); } .rewards-status__dot--eligible { background: var(--tp-available); } .rewards-status__dot--ineligible { background: var(--tp-claimed-other); } .rewards-table__empty { display: grid; gap: var(--space-3); padding: var(--space-8) var(--space-5); text-align: center; justify-items: center; } .rewards-table__empty h2 { font-family: var(--tp-font-display); } @media (min-width: 640px) { .tasks-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tasks-stat { padding-top: 0; padding-left: var(--space-5); border-top: none; border-left: var(--border-width) solid var(--tp-border); } .tasks-stat:first-child { padding-left: 0; border-left: none; } } /* The points pill never wraps, so its column has to hold the widest value on its own: at 70px a three-digit cost spilled over the status text. The floor fits five digits, and the columns only go side by side once the row is wide enough for every floor plus its gaps. */ @media (min-width: 820px) { .tasks-table__header, .tasks-table__row, .rewards-table__header, .rewards-table__row { display: grid; grid-template-columns: minmax(180px, 2.4fr) minmax(140px, 0.6fr) minmax(120px, 1fr) minmax(220px, 1.6fr); } /* Headers share the rows' column gap so the labels stay over their columns. */ .tasks-table__header, .rewards-table__header { column-gap: var(--space-4); } .tasks-table__note { grid-column: 1 / -1; } } .field__hint { margin-top: var(--space-1); color: var(--color-ink-muted); font-size: 0.85rem; } .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; } .tag-chip { display: inline-block; padding: 2px var(--space-3); border: var(--border-width) solid var(--color-overlay-line); border-radius: var(--radius-input); /* TagPalette::DEFAULT, so a chip rendered without a colour still lands on a pastel the fixed ink above was chosen for. */ background: #EEF0F3; color: var(--color-ink-on-pastel); font-size: 0.8rem; font-weight: 600; line-height: 1.6; text-decoration: none; } a.tag-chip:hover, a.tag-chip:focus { border-color: var(--color-ink-on-pastel); } .tag-chip--active { outline: 2px solid var(--color-primary); outline-offset: -2px; font-weight: 700; } /* Excluded tags stay legible but read as struck out, so the three filter states (unselected, included, excluded) are told apart without relying on colour. */ .tag-chip--excluded { outline: 2px dashed var(--color-ink-muted); outline-offset: -2px; text-decoration: line-through; opacity: 0.75; } .tag-chip__minus { margin-right: 0.15em; text-decoration: none; } .color-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .color-swatch { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); border: var(--border-width) solid var(--color-overlay-line); cursor: pointer; } .color-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .color-swatch:has(input:checked), .color-swatch:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; } .tasks-filter, .rewards-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .tasks-filter__label, .rewards-filter__label { color: var(--color-ink-muted); font-size: 0.875rem; font-weight: 600; } .tag-list--filter { margin-top: 0; } .tasks-filter__manage, .rewards-filter__manage, .tasks-filter__clear, .rewards-filter__clear { color: var(--color-primary); font-size: 0.875rem; font-weight: 600; } .tag-picker { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-4); } .tag-picker__options { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 var(--space-4); padding: 0; list-style: none; } .tag-picker__checkbox { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; } .field__sublabel { display: block; margin-top: var(--space-2); color: var(--color-ink-muted); font-size: 0.9rem; font-weight: 600; } .icon-picker { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-input); padding: var(--space-4); } .icon-picker__options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .icon-picker__option { position: relative; cursor: pointer; } .icon-picker__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .icon-picker__swatch { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--space-2); background: var(--tp-surface-alt); border: var(--border-width) solid var(--color-border); font-size: 1.25rem; line-height: 1; } .icon-picker__option--none .icon-picker__swatch { color: var(--color-ink-muted); font-family: var(--tp-font-display); font-size: 0.9rem; font-weight: 700; } .icon-picker__option:has(input:checked) .icon-picker__swatch, .icon-picker__option:focus-within .icon-picker__swatch { outline: 2px solid var(--color-primary); outline-offset: 2px; } .tasks-row__icon--emoji, .rewards-row__icon--emoji { font-family: var(--font-system); font-weight: 400; font-size: 1.5rem; } .detail-icon { font-family: var(--font-system); } /* Task and Reward detail surfaces */ .detail-surface { display: grid; gap: var(--space-6); } .detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); } .detail-hero__body { display: grid; justify-items: start; gap: var(--space-3); min-width: 0; } .detail-hero__back { display: inline-flex; min-height: 44px; align-items: center; gap: var(--space-2); color: var(--color-primary); font-weight: 700; text-decoration: none; } .detail-hero__back-icon { width: 20px; height: 20px; } .detail-hero__title { font-family: var(--tp-font-display); font-size: clamp(2rem, 5vw, 3rem); } .status-pill { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--tp-radius-pill); background: var(--color-surface-muted); color: var(--color-ink-muted); font-weight: 700; } .status-pill__dot { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; } .status-pill--available { background: var(--tp-available-bg); color: var(--tp-available-ink); } .status-pill--claimed_by_self { background: var(--tp-claimed-self-bg); color: var(--tp-claimed-self-ink); } .status-pill__dot--available { background: var(--tp-available); } .status-pill__dot--claimed_by_self { background: var(--tp-claimed-self); } .status-pill__dot--claimed_by_other { background: var(--tp-claimed-other); } .status-pill--eligible { background: var(--tp-available-bg); color: var(--tp-available-ink); } .status-pill__dot--eligible { background: var(--tp-available); } .status-pill__dot--ineligible { background: var(--tp-claimed-other); } .detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; color: var(--color-ink-muted); font-weight: 600; list-style: none; } .detail-meta__item { display: inline-flex; align-items: center; gap: var(--space-2); } .detail-meta__item + .detail-meta__item::before { content: "\2022"; margin-right: var(--space-1); color: var(--color-border-strong); } .detail-meta__icon { width: 18px; height: 18px; flex: none; color: var(--color-ink-subtle); } .detail-hero__summary { max-width: 60ch; margin: 0; color: var(--color-ink-muted); } .detail-hero__decor { position: relative; display: none; flex: none; width: 280px; height: 200px; } .detail-hero__dots { position: absolute; top: 0; right: 96px; width: 120px; height: 80px; color: var(--color-border-strong); } .detail-hero__medallion { position: absolute; right: 0; bottom: 0; display: grid; width: 176px; height: 176px; place-items: center; border-radius: 50%; background: var(--tp-icon-tile); color: var(--color-primary); font-family: var(--tp-font-display); font-size: 4rem; font-weight: 700; } .detail-hero__medallion--emoji { font-family: var(--font-system); font-weight: 400; } .detail-surface__grid { display: grid; align-items: start; gap: var(--space-4); } .detail-surface__aside { display: grid; align-content: start; gap: var(--space-4); } .detail-card { padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .detail-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } .detail-card__title { margin: 0; font-family: var(--tp-font-display); font-size: 1.25rem; } .detail-card__title--spaced { margin-bottom: var(--space-4); } .detail-card__hint { margin: var(--space-2) 0 var(--space-4); color: var(--color-ink-muted); } .detail-card__edit { display: inline-flex; min-height: 40px; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--tp-radius-pill); color: var(--color-primary); font-weight: 700; text-decoration: none; white-space: nowrap; } .detail-card__edit-icon { width: 18px; height: 18px; } .detail-rows { display: grid; margin: 0; padding: 0; list-style: none; } .detail-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.3fr) 24px; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: var(--border-width) solid var(--color-border); } .detail-row:first-child { border-top: none; } .detail-row__icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--tp-icon-tile); color: var(--color-primary); } .detail-row__icon .icon { width: 20px; height: 20px; } .detail-row__label { color: var(--color-ink-muted); font-weight: 600; } .detail-row__value { display: grid; gap: var(--space-1); min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .detail-row__value .tag-list { margin-top: 0; } .detail-row__hint { color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 400; } .detail-row__link { display: inline-grid; min-height: 44px; place-items: center; color: var(--color-ink-subtle); } .detail-row__chevron { width: 18px; height: 18px; } .detail-state { display: inline-flex; align-items: center; gap: var(--space-2); } .detail-state--available { color: var(--tp-available-ink); } .detail-state--claimed_by_self { color: var(--tp-claimed-self-ink); } .detail-state--claimed_by_other { color: var(--color-ink-muted); } .detail-state--eligible { color: var(--tp-available-ink); } .detail-state--ineligible { color: var(--color-ink-muted); } .action-stack { display: grid; gap: var(--space-3); } .action-stack form, .action-stack > div { display: grid; } .action-stack--destructive { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); } .action-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-4); border: var(--border-width) solid transparent; border-radius: 12px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; } .action-button__icon { width: 20px; height: 20px; flex: none; } .action-button--primary { border-color: var(--color-primary); background: var(--color-primary); color: var(--tp-primary-ink); } .action-button--primary:hover { background: var(--color-primary-hover); } .action-button--secondary { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-primary); } .action-button--secondary:hover { background: var(--color-surface-muted); } .action-button--danger { background: transparent; color: var(--color-danger); } .action-button--danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-raised)); } .progress-steps { display: grid; margin: 0; padding: 0; list-style: none; } .progress-step { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-3); padding-bottom: var(--space-5); } .progress-step:last-child { padding-bottom: 0; } .progress-step::before { content: ""; position: absolute; left: 9px; top: 24px; bottom: 0; width: 2px; background: var(--color-border); } .progress-step:last-child::before { display: none; } .progress-step__marker { grid-row: 1 / span 2; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface-raised); } .progress-step--done .progress-step__marker, .progress-step--current .progress-step__marker { border-color: var(--color-primary); } .progress-step--done .progress-step__marker { background: var(--color-primary); } .progress-step--current .progress-step__marker { border-width: 5px; } .progress-step__label { font-weight: 700; } .progress-step--current .progress-step__label { color: var(--color-primary); } .progress-step--upcoming .progress-step__label { color: var(--color-ink-muted); } .progress-step__hint { color: var(--color-ink-muted); font-size: 0.875rem; } /* Proposal review surfaces ------------------------------------------------ Where a Member settles one pending decision, reached from a Pending Changes card. It borrows the detail surface wholesale -- hero, cards, rows -- and adds only what a decision needs that a detail page does not: the kind of change as a chip, the before and after of it at a size worth crossing the page for, and the settled outcome where the buttons would have been. */ .review-chip { margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--tp-radius-pill); background: var(--tint-neutral-bg); color: var(--tint-neutral-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .review-chip--points { background: var(--tp-points-bg); color: var(--tp-points-ink); } .review-chip--new { background: var(--tint-info-bg); color: var(--tint-info-ink); } .review-chip--reward { background: var(--tint-reward-bg); color: var(--tint-reward-ink); } .review-chip--change { background: var(--tint-primary-bg); color: var(--tint-primary-ink); } /* A decision nobody has settled reads as unsettled, in the same warm hue the Pending Changes cards use; the two decided states borrow the status colours the rest of the app already reads as done and as stopped. */ .status-pill--awaiting { background: var(--tp-points-bg); color: var(--tp-points-ink); } .status-pill__dot--awaiting { background: var(--pending-rail); } .status-pill--waiting { background: var(--tint-neutral-bg); color: var(--tint-neutral-ink); } .status-pill__dot--waiting { background: var(--tp-claimed-other); } .status-pill--approved { background: var(--tp-available-bg); color: var(--tp-available-ink); } .status-pill__dot--approved { background: var(--tp-available); } .status-pill--rejected { background: var(--tint-neutral-bg); color: var(--tint-neutral-ink); } .status-pill__dot--rejected { background: var(--color-danger); } /* The one thing a reviewer is really deciding, so it leads the card and is sized to be read from across the page rather than looked up in a row. */ .review-delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); } .review-delta__side { display: grid; gap: var(--space-1); min-width: 8rem; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: 12px; background: var(--color-surface-muted); } .review-delta__side--proposed { border-color: var(--color-primary); background: var(--tint-primary-bg); } .review-delta__label { color: var(--color-ink-muted); font-size: 0.8125rem; font-weight: 600; } .review-delta__value { font-family: var(--tp-font-display); font-size: 1.5rem; font-weight: 700; } .review-delta__side--proposed .review-delta__value { color: var(--color-primary); } .review-delta__arrow { width: 20px; height: 20px; flex: none; color: var(--color-ink-subtle); } /* The forms in the decision card are grids of their own (.action-stack), so a field inside one needs its own room above the button it submits. */ .review-field { margin-bottom: var(--space-3); } /* What the decision card says when it has no buttons to offer: already settled, or waiting on somebody else. */ .review-outcome { margin-bottom: 0; color: var(--color-ink-muted); font-weight: 700; } /* Edit flows shown as a panel over a detail page */ .detail-panel { width: min(100% - var(--space-6), 560px); max-height: min(88vh, 900px); padding: 0; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-card); background: var(--color-surface-raised); color: var(--color-ink); overflow: auto; overscroll-behavior: contain; } .detail-panel::backdrop { background: var(--color-scrim); } .detail-panel__close { position: sticky; top: var(--space-3); z-index: 1; display: grid; float: right; width: 40px; height: 40px; margin-right: var(--space-3); place-items: center; border: var(--border-width) solid var(--color-border); border-radius: 50%; background: var(--color-surface-raised); color: var(--color-ink-muted); cursor: pointer; } .detail-panel__close-icon { width: 20px; height: 20px; } .detail-panel__frame { display: block; padding: var(--space-5); } .detail-panel__loading { margin: 0; color: var(--color-ink-muted); } .detail-panel .page-intro { gap: var(--space-2); padding-bottom: var(--space-4); } .detail-panel .page-intro h1 { font-size: 1.375rem; } .detail-panel .eyebrow { display: none; } .detail-panel .account-state { padding: var(--space-4) 0 0; border: none; border-radius: 0; } .detail-panel .household-form { max-width: none; } .detail-panel[aria-busy="true"] .detail-panel__frame, .detail-panel .detail-panel__frame[aria-busy="true"] { opacity: 0.6; } @media (min-width: 900px) { .detail-hero__decor { display: block; } .detail-surface__grid { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--space-6); } } .tag-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } .tag-update-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .tag-update-form .field__input { width: auto; min-width: 12rem; } /* Switches between the Task and Reward tag lists, which never share names. */ .tag-scope-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .tag-scope-switch__option { padding: var(--space-2) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-input); background: var(--color-surface-raised); color: var(--color-ink-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .tag-scope-switch__option--active { border-color: var(--color-primary); color: var(--color-primary); } /* Create-or-join Household surface: the root page for an Account with no Household yet, and /household/new once one already exists. */ .welcome-page .app-main { padding-top: var(--space-6); } .welcome { display: grid; gap: var(--space-6); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: calc(var(--radius-card) + 8px); background: var(--color-surface-raised); } .welcome__intro { display: grid; align-content: start; gap: var(--space-4); } .welcome__intro h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; } .welcome__accent { color: var(--color-primary); } .welcome__lede { max-width: 34ch; margin-bottom: 0; color: var(--color-ink-muted); font-size: 1.0625rem; } .welcome-art { display: block; width: 100%; max-width: 420px; height: auto; } .welcome__aside { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; padding: var(--space-4); border-radius: var(--radius-card); background: var(--welcome-aside-bg); color: var(--color-ink-muted); font-size: 0.9375rem; } .welcome__aside strong { display: block; color: var(--color-ink); } .welcome__aside-icon { display: inline-grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--tp-points-bg); color: var(--tp-points-ink); } .welcome__aside-icon .icon { width: 20px; height: 20px; } .welcome__panel { display: grid; align-content: start; gap: var(--space-4); } .welcome__account { margin-bottom: 0; color: var(--color-ink-muted); font-size: 0.9375rem; } .welcome__dev-signin { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); } .welcome__return { display: grid; gap: var(--space-2); } .welcome__return-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .welcome__footnote { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: 0; color: var(--color-ink-subtle); font-size: 0.875rem; } .welcome__footnote .icon { width: 16px; height: 16px; } .setup-panel { display: grid; gap: var(--space-5); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); } .setup-panel__head { display: flex; align-items: flex-start; gap: var(--space-4); } .setup-panel__head h2 { margin-bottom: var(--space-1); font-size: 1.125rem; } .setup-panel__badge { display: inline-grid; flex: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--tp-icon-tile); color: var(--color-primary); } .setup-panel__badge .icon { width: 24px; height: 24px; } .setup-panel__lede { margin-bottom: 0; color: var(--color-ink-muted); font-size: 0.9375rem; } .setup-choice { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; } .setup-choice__option { position: relative; display: grid; gap: var(--space-1); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-raised); cursor: pointer; } .setup-choice__input { position: absolute; width: 1px; height: 1px; opacity: 0; } .setup-choice__icon { display: inline-grid; width: 40px; height: 40px; margin-bottom: var(--space-2); place-items: center; border-radius: 50%; background: var(--color-surface-muted); color: var(--color-ink-muted); } .setup-choice__icon .icon { width: 22px; height: 22px; } .setup-choice__title { color: var(--color-ink); font-weight: 700; } .setup-choice__note { color: var(--color-ink-muted); font-size: 0.9375rem; } .setup-choice__tick { position: absolute; top: var(--space-3); right: var(--space-3); color: var(--color-primary); opacity: 0; } .setup-choice__tick .icon { width: 22px; height: 22px; stroke-width: 2.2; } .setup-choice__option:has(.setup-choice__input:checked) { border-color: var(--color-primary); background: var(--tp-icon-tile); } .setup-choice__option:has(.setup-choice__input:checked) .setup-choice__icon { background: var(--color-surface-raised); color: var(--color-primary); } .setup-choice__option:has(.setup-choice__input:checked) .setup-choice__tick { opacity: 1; } .setup-choice__option:has(.setup-choice__input:focus-visible) { outline: var(--focus-ring); outline-offset: 3px; } .setup-form { max-width: none; gap: var(--space-4); } /* Only the chosen half of the panel is on show. Without :has() support both forms stay visible, which is untidy but still entirely usable. */ .setup-panel:has(#setup-choice-create:checked) .setup-form--join, .setup-panel:has(#setup-choice-join:checked) .setup-form--create { display: none; } .setup-form__submit { width: 100%; gap: var(--space-2); } .setup-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-input); background: var(--tp-icon-tile); color: var(--color-ink-muted); font-size: 0.9375rem; } .setup-note__icon { flex: none; color: var(--color-primary); } .setup-note__icon .icon { width: 18px; height: 18px; } .field__hint { color: var(--color-ink-muted); font-size: 0.875rem; } .field__control { position: relative; display: block; } .field__control-icon { position: absolute; top: 50%; left: var(--space-3); display: grid; place-items: center; color: var(--color-ink-subtle); transform: translateY(-50%); } .field__control-icon .icon { width: 20px; height: 20px; } .field__input--iconed { padding-left: calc(var(--space-3) * 2 + 20px); } .household-switcher__link--add { color: var(--color-primary); } .household-switcher__link--signout { color: var(--color-ink-muted); } .household-switcher__link .household-pill__avatar .icon { width: 18px; height: 18px; } .dev-footer { display: flex; justify-content: center; padding: 0 var(--space-4) var(--space-8); } .dev-footer__button { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: 0.875rem; } @media (min-width: 900px) { .welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-8); padding: var(--space-8); } .setup-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contributor-shares { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); } .contributor-shares__legend { padding: 0 var(--space-2); color: var(--color-ink); font-weight: 700; } .contributor-shares__intro, .contributor-shares__remaining { color: var(--color-ink-muted); margin: 0; } .contributor-shares__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; } .contributor-share { display: grid; gap: var(--space-2); } .contributor-share__label { color: var(--color-ink); font-weight: 700; } .contributor-share__controls { display: flex; align-items: center; gap: var(--space-3); } .contributor-share__slider { flex: 1 1 auto; min-width: 0; min-height: 44px; accent-color: var(--color-primary); } .contributor-share__amount { flex: 0 0 5rem; width: 5rem; text-align: right; } /* Room for the fixed bottom navigation. Last in the file because both of these are set again further up by rules of the same weight, and it is the later declaration that has to be the one that reserves the space. */ @media (max-width: 639px) { .app-main { padding-bottom: calc(var(--space-10) + 64px); } .tasks-fab, .rewards-fab { bottom: calc(64px + max(var(--space-2), env(safe-area-inset-bottom))); } }