wrappers, or the JS rendering one .cambry-card per

). -------------------------------------------------------------------------- */ .trips-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .trips-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .trips-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- Trips_View card slot variants -------------------------------------------------------------------------- The `.cambry-card` surface and its base slot wrappers (`__header`, `__title`, `__body`, `__meta`, `__feedback`, `__actions`) live in components.css as of task 3.7. The rules below are the variants only the Trips view emits: - `.cambry-card__status-badge` + `--active` — Trips renders the trip's `status` string verbatim as a badge in the card's top-right corner (Req 1.4); the `--active` modifier swaps in the pink accent fill when the rendered trip is the global active trip (Req 1.7). - `.cambry-card__action-btn` + `--primary` — Trips uses this selector for its View Details and Make Active controls. The Attendees view uses a different selector (`.attendees-btn`) defined in attendees.css. -------------------------------------------------------------------------- */ /* Top-right status badge. The `flex-shrink: 0` keeps the badge from collapsing when the title is long; `margin-left: auto` is implicit via the parent `.cambry-card__header`'s space-between justification. */ .cambry-card__status-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.2rem 0.6rem; border-radius: 999px; background-color: var(--color-primary); color: var(--color-text); font-family: 'Yantramanav', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } /* "Currently Active" pink-accent variant of the status badge. Used when the trip whose trip_id equals the global active trip is rendered. */ .cambry-card__status-badge--active { background-color: var(--color-accent); color: var(--color-on-accent); } /* -------------------------------------------------------------------------- Card actions row + Make-Active control -------------------------------------------------------------------------- Requirements 2.1, 14.1, 14.3: - Make-Active control has a 44 × 44 minimum hit area at all viewport widths (we enforce it everywhere; the spec only requires it < 900px, but a single rule is simpler and harmless on wider screens). - 8px minimum spacing between adjacent interactive controls — the `.cambry-card__actions` row gap is set to 0.5rem (8px) over in components.css. -------------------------------------------------------------------------- */ .cambry-card__action-btn { display: inline-flex; align-items: center; justify-content: center; /* 44 × 44 minimum hit area per Req 2.1 / 14.1. min-width and min-height enforce the rectangle even when the label is short. */ min-width: 44px; min-height: 44px; padding: 0.55rem 1rem; border: 1px solid var(--color-primary); border-radius: 999px; background-color: transparent; color: var(--color-text); font-family: 'Yantramanav', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .cambry-card__action-btn:hover { background-color: rgba(248, 150, 255, 0.08); border-color: var(--color-accent); } .cambry-card__action-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .cambry-card__action-btn:active { transform: translateY(1px); } .cambry-card__action-btn:disabled, .cambry-card__action-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; border-color: var(--color-primary); background-color: transparent; } /* Primary affordance variant — used for Make-Active when the trip is not the global active trip. Rides the soft-pink accent fill so it reads as the recommended action on the card. */ .cambry-card__action-btn--primary { background-color: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } .cambry-card__action-btn--primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); } .cambry-card__action-btn--primary:disabled, .cambry-card__action-btn--primary[aria-disabled="true"] { background-color: var(--color-primary); color: var(--color-text-muted); border-color: var(--color-primary); } /* -------------------------------------------------------------------------- Inline create-trip form — tap-target compliance + Cambry styling -------------------------------------------------------------------------- The create form is rendered by trips.js's renderCreateForm() when the Floating Action Pill is activated. Its interactive controls (.trip-create-form__input, .trip-create-form__btn, .trip-create-form__ actions) had no class-scoped rules anywhere in the codebase before this block, so the form's s collapsed to ~22 CSS px tall under the global `* { padding: 0 }` reset in styles.css — well below the 44 × 44 minimum from Req 14.1. Why these rules live in trips.css and not styles.css: - styles.css is the global app-shell stylesheet; adding view-scoped BEM blocks there would dilute its purpose. - trips.css is loaded AFTER styles.css per index.html link order, so any future per-view override is straightforward. - styles.css's mobile rule `button { min-height: 44px }` only fires at @media (max-width: 767px); the Trips view's tap-target window is < 900 px (Req 14.1), so we re-enforce min-height here to cover the 768–899 px gap as well. Spacing: .trip-create-form__actions sets gap: 0.5rem (8 px) so the submit and cancel buttons satisfy Req 14.3's 8 px minimum between adjacent enabled controls when they sit side-by-side, and the row-gap variant covers the wrapped case on narrow screens. Requirements covered: 2.1, 14.1, 14.3 -------------------------------------------------------------------------- */ .trip-create-form { display: flex; flex-direction: column; gap: 0.5rem; /* 8 px — vertical spacing between form rows */ padding: 1rem; background-color: var(--color-surface); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } .trip-create-form__title { font-family: 'Yantramanav', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0; } .trip-create-form__hint, .trip-create-form__sub-hint { font-family: 'Yantramanav', sans-serif; font-size: 0.85rem; font-weight: 400; line-height: 1.4; color: var(--color-text-muted); margin: 0; } .trip-create-form__sub-hint code { font-family: 'Menlo', 'Consolas', monospace; font-size: 0.8rem; background-color: rgba(0, 0, 0, 0.25); padding: 0.05rem 0.3rem; border-radius: 3px; } .trip-create-form__label { font-family: 'Yantramanav', sans-serif; font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } /* Form-field input — Cambry palette + 44 × 44 minimum (Req 14.1). The min-height is unconditional (44 px on every viewport) rather than gated to mobile, because the same form is shown on desktop and the tap-comfortable height is also keyboard-comfortable. */ .trip-create-form__input { min-height: 44px; width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-primary); border-radius: 8px; background-color: var(--color-bg); color: var(--color-text); font-family: 'Yantramanav', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.4; } .trip-create-form__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(248, 150, 255, 0.25); } .trip-create-form__input::placeholder { color: var(--color-text-muted); opacity: 0.7; } .trip-create-form__input:disabled { opacity: 0.6; cursor: not-allowed; } /* Submit / Cancel row. gap: 0.5rem (8 px) on both axes covers both side-by-side layout (column-gap) and the wrapped case on narrow screens (row-gap), satisfying Req 14.3 in both directions. */ .trip-create-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } /* All trip-create-form buttons. min-width AND min-height are 44 px (Reqs 2.1 / 14.1). Without the explicit min-width the "Retry" button collapses to ~38 px wide because the global reset in styles.css strips UA button padding. */ .trip-create-form__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.55rem 1rem; border: 1px solid var(--color-primary); border-radius: 999px; background-color: transparent; color: var(--color-text); font-family: 'Yantramanav', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .trip-create-form__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .trip-create-form__btn:active { transform: translateY(1px); } .trip-create-form__btn:disabled { opacity: 0.55; cursor: not-allowed; } /* Submit + Retry are the primary affordance — accent fill. */ .trip-create-form__btn--submit, .trip-create-form__btn--retry { background-color: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); } .trip-create-form__btn--submit:hover:not(:disabled), .trip-create-form__btn--retry:hover:not(:disabled) { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); } .trip-create-form__btn--submit:disabled { background-color: var(--color-primary); color: var(--color-text-muted); border-color: var(--color-primary); } /* Cancel is the secondary affordance — outline only. */ .trip-create-form__btn--cancel:hover:not(:disabled) { background-color: rgba(248, 150, 255, 0.08); border-color: var(--color-accent); } /* Inline feedback area (progress / success / error). The progress variant shows a small spinner inline; the keyframes are defined in components.css (`cambry-spinner-rotate`), which loads before this stylesheet so the @keyframes resolves correctly. */ .trip-create-form__feedback { font-family: 'Yantramanav', sans-serif; font-size: 0.9rem; line-height: 1.4; margin-top: 0.25rem; } .trip-create-form__feedback:empty { display: none; } .trip-create-form__feedback--error { color: var(--color-error); } .trip-create-form__feedback--success { color: var(--color-success); } .trip-create-form__feedback--progress { color: var(--color-text-muted); display: flex; align-items: center; gap: 0.5rem; } .trip-create-form__spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--color-surface); border-top-color: var(--color-accent); border-radius: 50%; animation: cambry-spinner-rotate 0.9s linear infinite; flex-shrink: 0; } .trip-create-form__error-message { margin: 0 0 0.5rem 0; }