/* ─────────────────────────────────────────────────────────────────────────
* Shared Calendar — restyle on Sundown
* Drop in at: shared-calendar/static/css/styles.css
*
* Pairs with sundown/tokens.css (load it first). The base.html should add
* `class="sundown"` to so the tokens kick in, and import DM Sans +
* Phosphor icons in :
*
*
*
*
*
*
*
* ───────────────────────────────────────────────────────────────────────── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: var(--font-sans);
font-size: var(--text-body-size);
line-height: calc(var(--text-body-line) / var(--text-body-size));
color: var(--color-ink);
background: var(--color-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ─── Loading indicator ──────────────────────────────────────────────── */
#loading-indicator {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: var(--space-32);
color: var(--color-ink-subtle);
}
/* ─── Login ──────────────────────────────────────────────────────────── */
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100dvh;
padding: var(--space-32);
text-align: center;
}
.login-container .brand-mark {
width: 64px;
height: 42px;
margin-bottom: var(--space-24);
}
.login-container h1 {
font-size: var(--text-h1-size);
line-height: var(--text-h1-line);
font-weight: var(--text-h1-weight);
letter-spacing: -0.025em;
margin-bottom: var(--space-4);
color: var(--color-ink);
}
.login-container .login-tagline {
font-size: var(--text-body-sm-size);
color: var(--color-ink-muted);
margin-bottom: var(--space-32);
max-width: 28ch;
}
.login-form {
display: flex;
flex-direction: column;
gap: var(--space-16);
width: 100%;
max-width: 320px;
}
.login-form input {
font-family: inherit;
font-size: var(--text-body-size);
padding: 12px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-paper);
color: var(--color-ink);
outline: none;
transition:
border-color var(--duration-fast) var(--easing-out),
box-shadow var(--duration-fast) var(--easing-out);
}
.login-form input::placeholder {
color: var(--color-ink-subtle);
}
.login-form input:focus {
border-color: var(--color-primary);
box-shadow: var(--ring-focus);
}
.toggle-password {
background: none;
border: none;
font-size: var(--text-caption-size);
color: var(--color-ink-subtle);
cursor: pointer;
padding: var(--space-4);
align-self: center;
letter-spacing: 0.02em;
margin-top: calc(var(--space-4) * -1);
/*margin-top: calc(var(--space-24) * -1 + var(--space-4));*/
}
.toggle-password:hover {
color: var(--color-ink-muted);
}
.login-form button[type="submit"] {
margin-top: var(--space-8);
padding: 12px var(--space-16);
background: var(--color-primary);
color: var(--color-primary-fg);
border: none;
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-body-size);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: filter var(--duration-fast) var(--easing-out);
}
.login-form button[type="submit"]:hover {
filter: brightness(0.96);
}
.login-form button[type="submit"]:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
.login-error {
font-size: var(--text-body-sm-size);
color: var(--color-danger);
text-align: center;
min-height: 1.25rem;
}
/* ─── App container & pages ─────────────────────────────────────────── */
.app-container {
display: flex;
flex-direction: column;
margin: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.page {
display: flex;
flex-direction: column;
flex: 1;
}
/* ─── Page header ────────────────────────────────────────────────────── */
.page-header-desktop {
display: none;
}
.page-header-mobile {
display: flex;
align-items: center;
justify-content: space-between;
/*gap: var(--space-12);*/
padding: var(--space-16);
background: var(--color-paper);
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid var(--color-line);
}
.page-header h1 {
font-size: var(--text-h2-size);
line-height: var(--text-h2-line);
font-weight: var(--text-h2-weight);
letter-spacing: -0.015em;
flex: 1;
text-align: center;
color: var(--color-ink);
}
/* Events page leads with the brand mark, so the h1 lives left-aligned */
.events-page .page-header h1 {
text-align: left;
}
.brand-lockup {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--color-ink);
width: 220px;
padding-left: var(--space-12);
}
.brand-lockup .brand-mark {
width: 32px;
height: 22px;
flex-shrink: 0;
}
.brand-lockup .brand-name {
font-size: var(--text-h3-size);
font-weight: 600;
letter-spacing: -0.015em;
}
.icon-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--space-8);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-ink-muted);
border-radius: var(--radius-md);
text-decoration: none;
transition:
background var(--duration-fast) var(--easing-out),
color var(--duration-fast) var(--easing-out);
}
.icon-btn:hover {
background: var(--color-paper-alt);
color: var(--color-ink);
}
.icon-btn:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
.icon-btn .ph,
.icon-btn svg {
font-size: 22px;
width: 22px;
height: 22px;
}
/* ─── Events list ────────────────────────────────────────────────────── */
#events-list {
padding: var(--space-8) var(--space-16) 120px;
height: calc(100dvh - 64px - 12px);
}
#wishlist-list {
padding: 0 var(--space-16) 120px;
height: calc(100dvh - 64px - 12px);
}
.empty-message {
text-align: center;
color: var(--color-ink-subtle);
padding: var(--space-48) 0;
font-size: var(--text-body-size);
}
.empty-message::before {
content: "";
display: block;
width: 56px;
height: 56px;
margin: 0 auto var(--space-16);
border-radius: var(--radius-pill);
background: var(--stage-schedule-bg);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
}
.event-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-12) 0;
gap: var(--space-12);
border-radius: var(--radius-lg);
transition: background var(--duration-fast) var(--easing-out);
}
.event-card + .event-card {
border-top: 1px solid var(--color-line);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.event-card--own {
cursor: pointer;
}
.event-card--own:hover {
background: var(--color-paper-alt);
}
.event-info {
display: flex;
align-items: center;
gap: var(--space-12);
flex: 1;
min-width: 0;
}
/* Date pill: month + day, schedule-stage tint */
.event-date {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background: var(--stage-schedule-bg);
color: var(--stage-schedule-fg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
gap: 2px;
}
.event-date .event-date-month {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.85;
}
.event-date .event-date-day {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
}
.event-text {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 2px;
min-width: 0;
}
.event-title {
font-size: var(--text-body-size);
font-weight: 500;
color: var(--color-ink);
word-wrap: break-word;
overflow-wrap: break-word;
letter-spacing: -0.005em;
}
.event-datetime {
font-size: var(--text-body-sm-size);
color: var(--color-ink-muted);
}
.event-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.delete-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--space-8);
color: var(--color-ink-subtle);
flex-shrink: 0;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transition:
opacity var(--duration-fast) var(--easing-out),
color var(--duration-fast) var(--easing-out),
background var(--duration-fast) var(--easing-out);
}
.event-card:hover .delete-btn,
.event-card:focus-within .delete-btn {
opacity: 1;
}
.delete-btn:hover {
color: var(--color-danger);
background: var(--color-paper-alt);
}
.delete-btn svg {
width: 18px;
height: 18px;
}
/* ─── Offline banner ────────────────────────────────────────────────── */
#offline-banner {
background: var(--stage-discuss-bg);
color: var(--stage-discuss-fg);
text-align: center;
padding: var(--space-8) var(--space-12);
font-size: var(--text-caption-size);
font-weight: 500;
letter-spacing: 0.02em;
}
/* ─── Floating action button ────────────────────────────────────────── */
.fab {
position: fixed;
bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
right: var(--space-24);
width: 60px;
height: 60px;
background: var(--color-primary);
color: var(--color-primary-fg);
border: none;
border-radius: var(--radius-pill);
font-size: 28px;
font-weight: 400;
line-height: 1;
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition:
filter var(--duration-fast) var(--easing-out),
transform var(--duration-fast) var(--easing-out);
}
.fab:hover {
filter: brightness(0.96);
transform: translateY(-1px);
}
.fab:focus-visible {
outline: none;
box-shadow: var(--shadow-lg), var(--ring-focus);
}
.fab:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* Create button */
.create-item-btn {
display: none;
}
@media (min-width: 900px) {
.create-item-btn {
display: block;
width: 140px;
margin-bottom: var(--space-12);
padding: 12px var(--space-16);
background: var(--color-accent);
color: var(--color-primary-fg);
border: none;
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-body-size);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: filter var(--duration-fast) var(--easing-out);
}
.create-item-btn:hover {
filter: brightness(0.96);
}
.create-item-btn:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
}
/* ─── Dialog · bottom sheet ─────────────────────────────────────────── */
@keyframes sheet-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
dialog {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: auto;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background: var(--color-paper);
color: var(--color-ink);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: var(--shadow-lg);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
dialog[open] {
animation: sheet-up var(--duration-base) var(--easing-out);
}
dialog::backdrop {
background: oklch(0.22 0.035 40 / 0.4);
}
dialog h2 {
font-size: var(--text-h3-size);
line-height: var(--text-h3-line);
font-weight: var(--text-h3-weight);
letter-spacing: -0.01em;
margin-bottom: var(--space-16);
color: var(--color-ink);
}
.event-form {
display: flex;
flex-direction: column;
gap: var(--space-12);
padding: 0 var(--space-24) var(--space-24);
}
.event-form::before {
content: "";
display: block;
width: 36px;
height: 4px;
background: var(--color-line);
border-radius: var(--radius-pill);
margin: var(--space-12) auto var(--space-16);
}
.event-form input[type="text"],
.event-form input[type="url"],
.event-form input[type="date"] {
font-family: inherit;
font-size: var(--text-body-size);
padding: 12px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-paper);
color: var(--color-ink);
outline: none;
transition:
border-color var(--duration-fast) var(--easing-out),
box-shadow var(--duration-fast) var(--easing-out);
}
.event-form input::placeholder {
color: var(--color-ink-subtle);
}
.event-form input:focus {
border-color: var(--color-primary);
box-shadow: var(--ring-focus);
}
.time-selects {
display: flex;
align-items: center;
gap: var(--space-8);
padding: 4px 4px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-paper);
}
.time-selects select {
flex: 1;
padding: 10px var(--space-8);
border: none;
font-family: inherit;
font-size: var(--text-body-size);
background: transparent;
color: var(--color-ink);
outline: none;
appearance: none;
-webkit-appearance: none;
text-align: center;
border-radius: var(--radius-sm);
cursor: pointer;
}
.time-selects select:hover {
background: var(--color-paper-alt);
}
.time-selects span {
font-size: var(--text-body-size);
color: var(--color-ink-muted);
font-weight: 500;
}
.dialog-buttons {
display: flex;
gap: var(--space-8);
justify-content: flex-end;
margin-top: var(--space-8);
}
.dialog-buttons button,
.dialog-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: inherit;
font-size: var(--text-body-sm-size);
font-weight: 500;
letter-spacing: -0.005em;
padding: 12px var(--space-16);
border-radius: var(--radius-md);
min-height: 44px;
cursor: pointer;
transition:
filter var(--duration-fast) var(--easing-out),
background var(--duration-fast) var(--easing-out),
border-color var(--duration-fast) var(--easing-out);
}
.btn-cancel {
background: transparent;
border: 1px solid var(--color-line);
color: var(--color-ink-muted);
}
.btn-cancel:hover {
border-color: var(--color-ink-subtle);
color: var(--color-ink);
}
.btn-submit {
background: var(--color-primary);
color: var(--color-primary-fg);
border: 1px solid var(--color-primary);
}
.btn-submit:hover {
filter: brightness(0.96);
}
.btn-delete {
background: var(--color-danger);
color: var(--color-primary-fg);
border: 1px solid var(--color-danger);
}
.btn-delete:hover {
filter: brightness(0.96);
}
button:focus-visible {
outline: none;
box-shadow: var(--ring-focus);
}
/* ─── Settings ──────────────────────────────────────────────────────── */
.settings-container {
padding: var(--space-16);
}
.settings-section {
margin-bottom: var(--space-32);
}
.settings-section > h2 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink-subtle);
margin-bottom: var(--space-12);
display: flex;
align-items: center;
gap: var(--space-12);
}
.settings-section > h2::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-line);
}
.settings-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-16) 0;
gap: var(--space-12);
}
.settings-label {
font-size: var(--text-body-size);
color: var(--color-ink);
font-weight: 500;
}
.settings-value {
color: var(--color-ink-muted);
font-size: var(--text-body-size);
}
.settings-btn {
width: 100%;
padding: 12px var(--space-16);
background: var(--color-primary);
color: var(--color-primary-fg);
border: 1px solid var(--color-primary);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-body-size);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
text-align: center;
text-decoration: none;
display: block;
transition: filter var(--duration-fast) var(--easing-out);
}
.settings-btn:hover {
filter: brightness(0.96);
}
.settings-btn.secondary {
background: transparent;
color: var(--color-ink);
border: 1px solid var(--color-line);
}
.settings-btn.secondary:hover {
background: var(--color-paper-alt);
border-color: var(--color-ink-subtle);
filter: none;
}
.settings-hint {
font-size: var(--text-body-sm-size);
color: var(--color-ink-subtle);
margin-top: var(--space-8);
line-height: 1.4;
}
/* ─── Toggle switch ─────────────────────────────────────────────────── */
.toggle {
position: relative;
display: inline-block;
width: 48px;
height: 28px;
flex-shrink: 0;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-track {
position: absolute;
inset: 0;
background: var(--color-line);
border-radius: var(--radius-pill);
transition: background var(--duration-base) var(--easing-out);
cursor: pointer;
}
.toggle-track::before {
content: "";
position: absolute;
width: 24px;
height: 24px;
left: 2px;
top: 2px;
background: var(--color-paper);
border-radius: 50%;
transition: transform var(--duration-base) var(--easing-out);
box-shadow:
var(--shadow-sm),
0 1px 3px oklch(0 0 0 / 0.1);
}
.toggle input:checked + .toggle-track {
background: var(--color-primary);
}
.toggle input:checked + .toggle-track::before {
transform: translateX(20px);
}
.toggle input:disabled + .toggle-track {
opacity: 0.5;
cursor: not-allowed;
}
.toggle input:focus-visible + .toggle-track {
box-shadow: var(--ring-focus);
}
/* ─── Wider screens · centered dialog ───────────────────────────────── */
@media (min-width: 600px) {
@keyframes fade-in {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
dialog {
max-width: 460px;
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
dialog[open] {
animation: fade-in var(--duration-base) var(--easing-out);
}
.event-form::before {
display: none;
}
.event-form {
padding-top: var(--space-24);
}
}
/* ─── Share pages ────────────────────────────────────────────────────── */
.share-page .page-title {
font-size: var(--text-h1-size);
line-height: var(--text-h1-line);
font-weight: var(--text-h1-weight);
letter-spacing: -0.025em;
padding: var(--space-16) var(--space-16) var(--space-8);
color: var(--color-ink);
}
.share-page .login-error {
margin: 0 var(--space-16);
}
/* share_no_url.html: sits directly on the page, outside a padded form. */
.share-page > .empty-message {
padding: 0 var(--space-16);
}
/* ─── Wishlist ───────────────────────────────────────────────────────── */
.kind-meal {
--kind-bg: var(--stage-save-bg);
--kind-fg: var(--stage-save-fg);
--kind-dot: var(--stage-save-dot);
}
.kind-movie {
--kind-bg: var(--stage-prepare-bg);
--kind-fg: var(--stage-prepare-fg);
--kind-dot: var(--stage-prepare-dot);
}
.kind-place {
--kind-bg: var(--stage-budget-bg);
--kind-fg: var(--stage-budget-fg);
--kind-dot: var(--stage-budget-dot);
}
.kind-other {
--kind-bg: var(--stage-discuss-bg);
--kind-fg: var(--stage-discuss-fg);
--kind-dot: var(--stage-discuss-dot);
}
/* Bottom tabs */
.bottom-tabs {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--color-paper);
border-top: 1px solid var(--color-line);
padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
z-index: 20;
}
.bottom-tabs .brand-lockup {
display: none;
}
.open-settings-btn {
display: none;
}
.bottom-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-ink-subtle);
text-decoration: none;
border-radius: var(--radius-md);
}
.bottom-tab svg {
width: 22px;
height: 22px;
}
.bottom-tab.is-active {
color: var(--color-primary);
}
.bottom-tab .label {
line-height: 1;
}
/* ─── Larger screens · sidebar nav ─────────────────────────────────── */
@media (min-width: 900px) {
body {
background: var(--color-paper-alt);
}
.sundown {
background: var(--color-paper-alt);
}
.page-header-desktop {
display: flex;
height: var(--space-64);
}
.page-header-mobile {
display: none;
}
/* Turn the bottom bar into a fixed left sidebar */
.bottom-tabs {
left: 0;
top: var(--space-64);
right: auto;
bottom: 0;
width: 220px;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: 0 var(--space-8) var(--space-16);
border-top: none;
background: var(--color-paper-alt);
}
.bottom-tabs .brand-lockup {
display: flex;
padding-bottom: 22px;
}
.open-settings-btn {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
align-content: end;
align-items: center;
}
/* Icon + label side by side, left-aligned like a classic sidebar */
.bottom-tab {
width: 100%;
flex-direction: row;
justify-content: flex-start;
gap: var(--space-12);
padding: var(--space-12) var(--space-12);
font-size: 13px;
}
/* Content clears the sidebar */
.app-container {
background: var(--color-paper);
margin-left: 220px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 20px;
}
.settings-container {
padding: var(--space-24);
}
.settings-item {
/* flex-direction: column; */
justify-content: start;
align-items: start;
gap: var(--space-12);
}
.settings-btn {
width: 300px;
}
/* The bottom bar is gone, so the FAB can sit at the viewport edge */
.fab {
display: none;
}
/* Drop the extra bottom padding that cleared the old bottom bar */
#events-list,
#wishlist-list {
padding-bottom: var(--space-24);
overflow-y: scroll;
}
}
/* Wishlist page title */
.wishlist-page .page-title {
font-size: var(--text-h1-size);
line-height: var(--text-h1-line);
font-weight: var(--text-h1-weight);
letter-spacing: -0.025em;
padding: var(--space-16) var(--space-16) var(--space-8);
color: var(--color-ink);
}
/* Filter chips */
.filter-chips {
display: flex;
gap: 6px;
margin-top: var(--space-12); /* balance for top padding of list item */
padding: var(--space-12) var(--space-16);
overflow-x: auto;
scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar {
display: none;
}
.chip {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-line);
background: var(--color-paper);
color: var(--color-ink-muted);
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
}
.chip .chip-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--kind-dot, var(--color-ink-subtle));
}
.chip.is-active {
background: var(--color-ink);
border-color: var(--color-ink);
color: var(--color-paper);
padding-left: 30px;
padding-right: 30px;
}
@media (min-width: 900px) {
.filter-chips {
display: none;
}
.page-header-desktop .filter-chips {
display: flex;
padding-left: 0;
}
}
/* Kind badge */
.kind-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 7px 2px 6px;
border-radius: var(--radius-pill);
background: var(--kind-bg);
color: var(--kind-fg);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.kind-badge .kind-badge-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--kind-dot);
}
/* Status chips */
.status-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 7px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
text-decoration: none;
}
.status-chip .status-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
opacity: 0.7;
}
.status-chip.is-open {
background: var(--color-paper-alt);
color: var(--color-ink-muted);
}
.status-chip.is-scheduled {
background: var(--stage-schedule-bg);
color: var(--stage-schedule-fg);
}
.status-chip.is-done {
background: var(--stage-discuss-bg);
color: var(--color-success);
}
.status-chip.is-done .status-dot {
background: var(--color-success);
opacity: 1;
}
/* Wishlist rows */
.wish-row {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-12) 0;
border-radius: var(--radius-lg);
cursor: pointer;
}
.wish-row:hover {
background: var(--color-paper-alt);
}
.wish-row + .wish-row {
border-top: 1px solid var(--color-line);
border-radius: 0;
}
.kind-tile {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--kind-bg);
color: var(--kind-fg);
display: flex;
align-items: center;
justify-content: center;
}
.kind-tile svg {
width: 22px;
height: 22px;
}
.wish-row .wish-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.wish-row .wish-title {
font-size: var(--text-body-size);
font-weight: 500;
color: var(--color-ink);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wish-row .wish-meta {
font-size: var(--text-body-sm-size);
color: var(--color-ink-muted);
display: flex;
align-items: center;
gap: 8px;
}
.wish-row .wish-meta .who-avatar,
.detail-sub .who-avatar {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--color-paper-alt);
border: 1px solid var(--color-line);
font-size: 8px;
font-weight: 700;
color: var(--color-ink-muted);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Empty state */
.wish-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 32px 100px;
text-align: center;
}
.wish-empty-art {
display: flex;
gap: 10px;
margin-bottom: 24px;
}
.wish-empty-tile {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--kind-bg);
color: var(--kind-fg);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.wish-empty-tile:nth-child(1) {
transform: rotate(-7deg) translateY(2px);
}
.wish-empty-tile:nth-child(2) {
transform: translateY(-4px);
}
.wish-empty-tile:nth-child(3) {
transform: rotate(7deg) translateY(2px);
}
.wish-empty-tile svg {
width: 28px;
height: 28px;
}
.wish-empty-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--color-ink);
margin-bottom: 10px;
max-width: 18ch;
}
.wish-empty-body {
font-size: 14px;
line-height: 1.5;
color: var(--color-ink-muted);
margin-bottom: 22px;
max-width: 30ch;
}
.wish-empty-cta {
padding: 12px 22px;
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--color-primary-fg);
border: 1px solid var(--color-primary);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
/* Add / edit sheet */
.add-sheet {
padding: 6px 0 20px;
}
.add-sheet .handle,
.detail-sheet .handle,
.schedule-sheet .handle {
width: 36px;
height: 4px;
background: var(--color-line);
border-radius: 999px;
margin: 8px auto 14px;
}
.add-title {
font-size: var(--text-h3-size);
line-height: var(--text-h3-line);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-ink);
padding: 0 var(--space-16) var(--space-16);
border-bottom: 1px solid var(--color-line);
}
.add-section {
padding: 16px var(--space-16) 4px;
}
.kind-segmented {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.kind-seg {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px 10px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-paper);
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-ink-muted);
cursor: pointer;
transition: border-color var(--duration-fast) var(--easing-out);
}
.kind-seg-tile {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--kind-bg);
color: var(--kind-fg);
display: inline-flex;
align-items: center;
justify-content: center;
}
.kind-seg-tile svg {
width: 22px;
height: 22px;
}
.kind-seg.is-on {
border-color: var(--kind-dot);
color: var(--color-ink);
box-shadow: 0 0 0 3px oklch(from var(--kind-dot) l c h / 0.12);
}
.add-fields {
padding: 18px var(--space-16) 8px;
display: flex;
flex-direction: column;
gap: 14px;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink-subtle);
display: flex;
align-items: center;
gap: 8px;
}
.field-opt {
font-size: 10px;
letter-spacing: 0.12em;
font-weight: 500;
color: var(--color-ink-subtle);
opacity: 0.7;
}
.field input,
.field textarea {
font-family: inherit;
font-size: var(--text-body-size);
padding: 12px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
background: var(--color-paper);
color: var(--color-ink);
outline: none;
resize: none;
transition:
border-color var(--duration-fast) var(--easing-out),
box-shadow var(--duration-fast) var(--easing-out);
}
.field input:focus,
.field textarea:focus {
border-color: var(--color-primary);
box-shadow: var(--ring-focus);
}
.sheet-foot {
display: flex;
gap: 8px;
padding: 14px var(--space-16) 0;
}
.sheet-foot button,
.sheet-foot a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
flex: 1;
padding: 14px;
border-radius: var(--radius-md);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--color-line);
}
.sheet-foot .btn-cancel {
background: var(--color-paper);
color: var(--color-ink-muted);
}
.sheet-foot .btn-submit {
background: var(--color-primary);
color: var(--color-primary-fg);
border-color: var(--color-primary);
}
/* Detail sheet */
.detail-sheet {
padding: 6px 0 20px;
}
.detail-head {
display: flex;
align-items: center;
gap: 14px;
padding: 4px var(--space-16) 16px;
border-bottom: 1px solid var(--color-line);
}
.detail-head .kind-tile {
width: 56px;
height: 56px;
}
.detail-titles {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.detail-title {
font-size: var(--text-h3-size);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.detail-sub {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--color-ink-subtle);
}
.detail-note {
padding: 16px var(--space-16);
border-bottom: 1px solid var(--color-line);
}
.detail-note p {
font-size: 14.5px;
line-height: 1.5;
color: var(--color-ink-muted);
}
.detail-actions {
padding: 12px var(--space-16) 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.detail-action {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--color-line);
background: var(--color-paper);
font-family: inherit;
font-size: 14.5px;
font-weight: 500;
color: var(--color-ink);
cursor: pointer;
text-align: left;
text-decoration: none;
}
.detail-action:hover {
background: var(--color-paper-alt);
}
.detail-action svg {
width: 20px;
height: 20px;
color: var(--color-ink-muted);
flex-shrink: 0;
}
.detail-action.primary {
background: var(--color-primary);
color: var(--color-primary-fg);
border-color: var(--color-primary);
font-weight: 600;
}
.detail-action.primary svg {
color: var(--color-primary-fg);
}
.detail-action.primary:hover {
filter: brightness(0.96);
background: var(--color-primary);
}
.detail-action.danger {
color: var(--color-danger);
}
.detail-action.danger svg {
color: var(--color-danger);
}
/* Schedule sheet */
.schedule-sheet {
padding: 6px 0 20px;
}
.schedule-sheet .sheet-head {
display: flex;
align-items: center;
gap: 12px;
padding: 4px var(--space-16) 14px;
border-bottom: 1px solid var(--color-line);
}
.schedule-sheet .sheet-head .kind-tile {
width: 52px;
height: 52px;
}
.schedule-sheet .sheet-head .sheet-title {
font-size: var(--text-h3-size);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-ink);
}
.schedule-sheet .sheet-head .sheet-sub {
font-size: 12.5px;
color: var(--color-ink-subtle);
}
.schedule-sheet .sheet-section {
padding: 14px var(--space-16);
border-bottom: 1px solid var(--color-line);
}
.schedule-sheet .sheet-section h4 {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink-subtle);
margin-bottom: 10px;
}
.day-picker {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
}
.day-pill {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0 6px;
border-radius: 10px;
border: 1px solid var(--color-line);
background: var(--color-paper);
cursor: pointer;
gap: 2px;
}
.day-pill .dow {
font-size: 10px;
color: var(--color-ink-subtle);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.day-pill .dom {
font-size: 14px;
font-weight: 600;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.day-pill.is-on {
background: var(--color-ink);
border-color: var(--color-ink);
}
.day-pill.is-on .dow {
color: oklch(from var(--color-paper) l c h / 0.7);
}
.day-pill.is-on .dom {
color: var(--color-paper);
}
.time-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.time-pills .time-pill {
padding: 8px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-line);
background: var(--color-paper);
font-size: 13px;
font-weight: 500;
color: var(--color-ink-muted);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.time-pills .time-pill.is-on {
background: var(--color-ink);
border-color: var(--color-ink);
color: var(--color-paper);
}
/* View Transitions
Direction comes from [data-transition] on , set in frontend/main.js on
htmx:beforeTransition. ::view-transition-* pseudos resolve against the NEW
DOM only, so :has(.page-x) can't tell forward from back. */
/* Define the slide animations */
@keyframes slide-from-right {
from {
transform: translateX(100%);
}
}
@keyframes slide-to-right {
to {
transform: translateX(100%);
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}
/* Tab switch (calendar <-> wishlist): plain cross-fade */
:root[data-transition="tab"]::view-transition-old(root) {
animation: 180ms var(--easing-out) both fade-out;
}
:root[data-transition="tab"]::view-transition-new(root) {
animation: 180ms var(--easing-out) both fade-in;
}
/* Into settings: new page slides in over the old one */
:root[data-transition="forward"]::view-transition-old(root) {
animation: 300ms var(--easing-out) both fade-out;
}
:root[data-transition="forward"]::view-transition-new(root) {
animation: 300ms var(--easing-out) both slide-from-right;
z-index: 1;
}
/* Out of settings: old page slides off to the right */
:root[data-transition="back"]::view-transition-old(root) {
animation: 300ms var(--easing-out) both slide-to-right;
z-index: 1;
}
:root[data-transition="back"]::view-transition-new(root) {
animation: 300ms var(--easing-out) both fade-in;
}
/* Any swap we didn't tag: no root animation at all */
:root[data-transition="none"]::view-transition-old(root),
:root[data-transition="none"]::view-transition-new(root) {
animation: none;
}
.chip {
view-transition-class: chip;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 1ms !important;
}
::view-transition-old(.chip),
::view-transition-new(.chip) {
animation-duration: 1ms !important;
}
::view-transition-group(.chip) {
animation-duration: 1ms !important;
}
}
@media (prefers-reduced-motion: no-preference) {
::view-transition-group(.chip) {
animation-duration: 240ms;
animation-timing-function: var(--easing-out);
}
::view-transition-old(.chip),
::view-transition-new(.chip) {
height: 100%;
width: auto;
animation-duration: 120ms;
animation-timing-function: linear;
}
}