/* ========================================================================== TEND Design Tokens (tend.css) -------------------------------------------------------------------------- Single source of truth for TEND's visual identity. Pure CSS custom properties: include this file in any HTML the Go app serves (html/template, templ, HTMX, or a JS frontend all read it identically). Identity in one line: confessional serif and a tended-green palette, delivered through a clean, utilitarian, data-legible interface. Usage rule of thumb: - FOREST is structure and primary action. - SAGE is accent, borders, and large quiet fills (never small text). - PAPER/SURFACE is the calm ground everything sits on. - Serif is the voice (headings, nav, reading). Sans is the data layer (forms, tables, numbers, timestamps). Swap --font-body to serif if you want an all-serif treatment. ========================================================================== */ :root { /* ---- Brand: Forest (primary green; structure + action) ---------------- */ --tend-forest-900: #16241C; /* deepest; reserved emphasis */ --tend-forest-800: #1F3329; --tend-forest-700: #294034; /* PRIMARY brand green */ --tend-forest-600: #335041; --tend-forest-500: #3F634F; --tend-forest-400: #527A62; /* ---- Brand: Sage (secondary; accent + borders + large fills) ---------- */ --tend-sage-700: #5E7D6A; --tend-sage-600: #6E8B78; --tend-sage-500: #7C9885; /* SECONDARY brand sage */ --tend-sage-400: #97AE9F; --tend-sage-300: #B3C5B9; --tend-sage-200: #D0DDD3; --tend-sage-100: #E4ECE6; /* ---- Paper & neutrals (cool, green-tinted; NOT warm cream) ------------ */ --tend-paper: #F4F7F2; /* app background; stays green-tinted for brand ground */ --tend-surface: #F1F4F6; /* cards, panels — slate-50 for breathing room */ --tend-surface-2: #FFFFFF; /* raised popovers, modals */ --tend-sunk: #E4E9ED; /* wells, inset zones, table stripes — slate-100 */ --tend-border: #BEC9D1; /* hairline borders, dividers — slate-200 */ --tend-border-strong: #8699A6;/* stronger borders — slate-400 */ /* ---- Slate (neutral UI structure; cool blue-gray, no green cast) ------ */ --tend-slate-900: #252D35; --tend-slate-800: #374450; --tend-slate-600: #546473; --tend-slate-400: #8699A6; --tend-slate-200: #BEC9D1; --tend-slate-100: #E4E9ED; --tend-slate-50: #F1F4F6; /* ---- Ink (text; dark green-black, never pure #000) -------------------- */ --tend-ink: #1A2A22; /* primary text */ --tend-ink-soft: #45554B; /* secondary text */ --tend-ink-faint: #6C786F; /* captions, placeholders, disabled */ /* ---- Semantic (earthy, muted; sit inside the palette) ----------------- */ --tend-success: #2F855A; --tend-success-bg: #E3F0E8; --tend-warning: #B7791F; --tend-warning-bg: #F6ECD8; --tend-danger: #A6403C; --tend-danger-bg: #F4E2E1; --tend-info: #3B6E8F; --tend-info-bg: #E2ECF1; /* ---- Role aliases (use these in components; not raw scale) ------------ */ --tend-bg: var(--tend-paper); /* green-tinted brand ground */ --tend-fg: var(--tend-ink); --tend-primary: var(--tend-forest-700); --tend-primary-hover: var(--tend-forest-800); --tend-primary-fg: #FFFFFF; --tend-accent: var(--tend-sage-500); --tend-accent-fg: var(--tend-forest-900); --tend-link: var(--tend-forest-600); --tend-link-hover: var(--tend-forest-800); /* Slate-backed structural roles; these replace the all-green surface stack */ --tend-secondary-bg: var(--tend-slate-800); /* sidebar, nav bar background */ --tend-secondary-fg: var(--tend-slate-200); /* text on dark slate */ --tend-muted: var(--tend-slate-600); /* secondary/metadata text */ --tend-subtle: var(--tend-slate-400); /* captions, placeholders */ /* ---- Typography ------------------------------------------------------- */ /* Load in : Geist (400,500,600,700) + IBM Plex Mono (400,500) Geist via Vercel CDN: (DM Sans is the Google Fonts equivalent if self-hosting Geist is not set up; swap to Geist once npm/embed is configured.) */ --tend-font-display: "Geist", "DM Sans", system-ui, -apple-system, sans-serif; --tend-font-body: "Geist", "DM Sans", system-ui, -apple-system, sans-serif; --tend-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Single-family system: hierarchy lives in weight and scale, not family contrast. --tend-font-display and --tend-font-body are the same; keep the tokens separate so a future theme swap (e.g. display → a variable font) is a one-line change. */ /* Type scale (1rem = 16px base) */ --tend-text-xs: 0.75rem; /* 12 */ --tend-text-sm: 0.875rem; /* 14 */ --tend-text-base: 1rem; /* 16 */ --tend-text-lg: 1.125rem; /* 18 */ --tend-text-xl: 1.25rem; /* 20 */ --tend-text-2xl: 1.5rem; /* 24 */ --tend-text-3xl: 1.875rem; /* 30 */ --tend-text-4xl: 2.25rem; /* 36 */ --tend-text-5xl: 3rem; /* 48 */ --tend-leading-tight: 1.15; /* display headings */ --tend-leading-snug: 1.35; /* subheads, UI */ --tend-leading-normal: 1.55; /* body */ --tend-leading-read: 1.7; /* long-form reading (testimony, packets) */ --tend-tracking-tight: -0.01em; --tend-tracking-normal: 0; --tend-tracking-wide: 0.04em; --tend-tracking-caps: 0.12em; /* small caps eyebrows, the wordmark */ --tend-weight-regular: 400; --tend-weight-medium: 500; --tend-weight-semibold:600; --tend-weight-bold: 700; /* ---- Spacing (4px base) ----------------------------------------------- */ --tend-space-0: 0; --tend-space-1: 0.25rem; /* 4 */ --tend-space-2: 0.5rem; /* 8 */ --tend-space-3: 0.75rem; /* 12 */ --tend-space-4: 1rem; /* 16 */ --tend-space-5: 1.25rem; /* 20 */ --tend-space-6: 1.5rem; /* 24 */ --tend-space-8: 2rem; /* 32 */ --tend-space-10:2.5rem; /* 40 */ --tend-space-12:3rem; /* 48 */ --tend-space-16:4rem; /* 64 */ /* ---- Radius (utilitarian: modest, never pillowy) ---------------------- */ --tend-radius-sm: 3px; --tend-radius: 5px; /* default: buttons, inputs, cards */ --tend-radius-md: 8px; --tend-radius-lg: 12px; /* modals, large panels */ --tend-radius-full: 9999px; /* ---- Elevation (borders first; shadows soft and sparing) -------------- */ --tend-shadow-sm: 0 1px 2px rgba(22, 36, 28, 0.06); --tend-shadow: 0 1px 3px rgba(22, 36, 28, 0.08), 0 1px 2px rgba(22, 36, 28, 0.05); --tend-shadow-lg: 0 8px 24px rgba(22, 36, 28, 0.12); /* ---- Focus (always visible; accessibility floor) ---------------------- */ --tend-focus-ring: 0 0 0 2px var(--tend-surface), 0 0 0 4px var(--tend-sage-500); /* ---- Motion ----------------------------------------------------------- */ --tend-ease: cubic-bezier(0.2, 0, 0, 1); --tend-dur-fast: 120ms; --tend-dur: 180ms; /* ---- Layout shell (names the numbers the pages used to hard-code) ------ */ --tend-shell-sidebar-w: 248px; /* persistent left nav width (laptop) */ --tend-shell-topbar-h: 48px; /* thin top bar height */ --tend-shell-bp-tablet: 960px; /* below: sidebar collapses to a drawer */ --tend-shell-bp-phone: 600px; /* below: single-column reflow */ /* ---- Content measure (reading widths) -------------------------------- */ --tend-measure: 46rem; /* default reading column */ --tend-measure-wide: 64rem; /* two-pane interview / meeting review */ /* ---- Touch (tablet; coarse pointer) ---------------------------------- */ --tend-touch-min: 44px; /* minimum tap target */ --tend-tap-pad: 12px; /* padding bump under (pointer: coarse) */ /* ---- Data density (the new DataTable) -------------------------------- */ --tend-row-h: 44px; /* default table row height */ --tend-row-h-compact: 36px; /* compact variant */ /* ---- Stage tokens for the enum values tend.css did not yet cover ------ */ /* presented = info/violet, deferred = warning, withdrawn = neutral slate. No new hues — these alias the existing semantic family. */ --tend-stage-presented-bg: var(--tend-info-bg); --tend-stage-presented-fg: var(--tend-info); --tend-stage-deferred-bg: var(--tend-warning-bg); --tend-stage-deferred-fg: var(--tend-warning); --tend-stage-withdrawn-bg: var(--tend-slate-100); --tend-stage-withdrawn-fg: var(--tend-slate-600); } /* ========================================================================== Base element defaults (optional starting point; delete if you prefer your own reset). Establishes the serif/sans split and the paper ground. ========================================================================== */ body { background: var(--tend-bg); color: var(--tend-fg); font-family: var(--tend-font-body); font-size: var(--tend-text-base); line-height: var(--tend-leading-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .tend-display { font-family: var(--tend-font-display); font-weight: var(--tend-weight-bold); line-height: var(--tend-leading-tight); letter-spacing: var(--tend-tracking-tight); color: var(--tend-forest-800); } h1 { font-size: var(--tend-text-4xl); } h2 { font-size: var(--tend-text-3xl); } h3 { font-size: var(--tend-text-2xl); } h4 { font-size: var(--tend-text-xl); } /* Long-form reading: testimony, packets, presenter scripts. Geometric at a larger size with generous leading. */ .tend-prose { font-family: var(--tend-font-body); font-size: var(--tend-text-lg); font-weight: var(--tend-weight-regular); line-height: var(--tend-leading-read); color: var(--tend-ink); max-width: 68ch; } /* Eyebrow / section label: small caps, sage, the structural voice. */ .tend-eyebrow { font-family: var(--tend-font-body); font-size: var(--tend-text-xs); font-weight: var(--tend-weight-semibold); letter-spacing: var(--tend-tracking-caps); text-transform: uppercase; color: var(--tend-sage-700); } a { color: var(--tend-link); text-underline-offset: 2px; } a:hover { color: var(--tend-link-hover); } :focus-visible { outline: none; box-shadow: var(--tend-focus-ring); border-radius: var(--tend-radius-sm); } /* Data: tabular figures for numbers, IDs, timestamps. */ .tend-data, td.tend-num, .tend-mono { font-family: var(--tend-font-mono); font-variant-numeric: tabular-nums; font-size: var(--tend-text-sm); } /* ========================================================================== Component primitives (minimal; lift or rename freely) ========================================================================== */ .tend-btn { font-family: var(--tend-font-body); font-weight: var(--tend-weight-medium); font-size: var(--tend-text-sm); padding: var(--tend-space-2) var(--tend-space-4); border-radius: var(--tend-radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--tend-dur) var(--tend-ease), border-color var(--tend-dur) var(--tend-ease); } .tend-btn-primary { background: var(--tend-primary); color: var(--tend-primary-fg); } .tend-btn-primary:hover { background: var(--tend-primary-hover); } .tend-btn-secondary { background: transparent; color: var(--tend-forest-700); border-color: var(--tend-border-strong); } .tend-btn-secondary:hover { background: var(--tend-sunk); } .tend-btn-danger { background: var(--tend-danger); color: #fff; } .tend-card { background: var(--tend-surface); border: 1px solid var(--tend-border); border-radius: var(--tend-radius-md); box-shadow: var(--tend-shadow-sm); padding: var(--tend-space-6); } .tend-input { /* border-box so width:100% includes padding+border — without it a width:100% input overflows its container by ~1.5rem, shoving the right column toward the card edge and unbalancing the margins. */ box-sizing: border-box; font-family: var(--tend-font-body); font-size: var(--tend-text-sm); color: var(--tend-ink); background: var(--tend-surface-2); border: 1px solid var(--tend-border-strong); border-radius: var(--tend-radius); padding: var(--tend-space-2) var(--tend-space-3); } .tend-input::placeholder { color: var(--tend-ink-faint); } .tend-input:focus-visible { border-color: var(--tend-sage-500); } /* Status pills, tinted to the semantic backgrounds */ .tend-pill { display: inline-flex; align-items: center; gap: var(--tend-space-1); font-family: var(--tend-font-body); font-size: var(--tend-text-xs); font-weight: var(--tend-weight-medium); padding: 2px var(--tend-space-2); border-radius: var(--tend-radius-full); } .tend-pill-success { background: var(--tend-success-bg); color: var(--tend-success); } .tend-pill-warning { background: var(--tend-warning-bg); color: var(--tend-warning); } .tend-pill-danger { background: var(--tend-danger-bg); color: var(--tend-danger); } .tend-pill-info { background: var(--tend-info-bg); color: var(--tend-info); } /* Slate-backed structural surfaces */ .tend-nav { background: var(--tend-slate-800); color: var(--tend-slate-200); border-right: 1px solid var(--tend-slate-900); } .tend-nav-item { font-family: var(--tend-font-body); font-size: var(--tend-text-sm); font-weight: var(--tend-weight-medium); color: var(--tend-slate-200); padding: var(--tend-space-2) var(--tend-space-4); border-radius: var(--tend-radius); transition: background var(--tend-dur) var(--tend-ease); } .tend-nav-item:hover { background: var(--tend-slate-600); color: #fff; } .tend-nav-item.active { background: var(--tend-forest-700); color: #fff; } /* Stage badges map TEND's applicant_stage enum to color. */ .tend-stage-intake { background: var(--tend-sage-100); color: var(--tend-forest-700); } .tend-stage-scheduled { background: var(--tend-info-bg); color: var(--tend-info); } .tend-stage-interviewed { background: var(--tend-sage-200); color: var(--tend-forest-800); } .tend-stage-elder_review{ background: var(--tend-warning-bg); color: var(--tend-warning); } .tend-stage-approved { background: var(--tend-success-bg); color: var(--tend-success); } .tend-stage-received { background: var(--tend-forest-700); color: #fff; } .tend-stage-declined { background: var(--tend-danger-bg); color: var(--tend-danger); } /* Enum values not previously covered (presented/deferred/withdrawn). */ .tend-stage-presented { background: var(--tend-stage-presented-bg); color: var(--tend-stage-presented-fg); } .tend-stage-deferred { background: var(--tend-stage-deferred-bg); color: var(--tend-stage-deferred-fg); } .tend-stage-withdrawn { background: var(--tend-stage-withdrawn-bg); color: var(--tend-stage-withdrawn-fg); } /* stage_badge: the inline pill form (a stage label rendered next to a name). */ .tend-stage-badge { display:inline-block; padding:.1rem .55rem; border-radius:.4rem; font-size:.78rem; font-weight:600; font-family:var(--tend-font-body); letter-spacing:.01em; vertical-align:middle; } /* StageRail: read-only horizontal progress (NEVER a transition control). */ .tend-stage-rail { /* Equal, capped columns so each node fills its track and the descriptor wraps INSIDE the box (F10) — the old flex+wrap sized each node to its single-line descriptor, making nodes uneven and forcing a ragged 4+2 wrap. auto-fit fits as many equal columns as the width allows, wrapping gracefully when narrow. */ /* Fixed-width nodes (NOT 1fr) so they don't stretch to fill the row — that's what made earlier gap bumps invisible. space-between then distributes the leftover row width as real horizontal space between the tabs. Narrower boxes (~7rem, ≈25% less) let the descriptors wrap (F10 follow-up). */ display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tend-space-4) var(--tend-space-5); list-style: none; margin: 0 0 var(--tend-space-6); padding: 0; } .tend-stage-node { display: inline-flex; flex-direction: column; gap: 2px; padding: var(--tend-space-2) var(--tend-space-3); border-radius: var(--tend-radius); border: 1px solid var(--tend-border); background: var(--tend-surface); font-size: var(--tend-text-sm); } .tend-stage-node .tend-stage-node-desc { font-size: var(--tend-text-xs); color: var(--tend-muted); } .tend-stage-node.done { border-color: var(--tend-sage-400); background: var(--tend-sage-100); color: var(--tend-forest-700); } .tend-stage-node.current { border-color: var(--tend-forest-700); background: var(--tend-forest-700); color: #fff; } .tend-stage-node.current .tend-stage-node-desc { color: var(--tend-sage-200); } .tend-stage-node.upcoming{ opacity: .72; } /* ========================================================================== App shell (authenticated elder surface): persistent left sidebar + thin top bar + content frame. Login/intake/device pages keep the centered head. ========================================================================== */ .tend-shell { display: grid; grid-template-columns: var(--tend-shell-sidebar-w) 1fr; grid-template-rows: var(--tend-shell-topbar-h) 1fr; grid-template-areas: "nav topbar" "nav content"; min-height: 100vh; } .tend-shell-nav { grid-area: nav; background: var(--tend-slate-800); color: var(--tend-slate-200); border-right: 1px solid var(--tend-slate-900); display: flex; flex-direction: column; padding: var(--tend-space-4) var(--tend-space-3); gap: var(--tend-space-2); } .tend-shell-nav .tend-shell-brand { display: inline-flex; align-items: center; gap: var(--tend-space-2); text-decoration: none; color: #fff; padding: var(--tend-space-2) var(--tend-space-2) var(--tend-space-4); } .tend-shell-nav .tend-shell-brand .tend-wordmark { font-weight: var(--tend-weight-bold); letter-spacing: var(--tend-tracking-caps); font-size: var(--tend-text-lg); color: #fff; } .tend-shell-nav .tend-shell-nav-list { display: flex; flex-direction: column; gap: var(--tend-space-1); } .tend-shell-nav .tend-nav-item { display: block; text-decoration: none; } .tend-shell-nav .tend-shell-foot { margin-top: auto; padding-top: var(--tend-space-4); font-size: var(--tend-text-xs); color: var(--tend-slate-400); } .tend-shell-topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: var(--tend-space-4); padding: 0 var(--tend-space-6); border-bottom: 1px solid var(--tend-border); background: var(--tend-surface-2); } .tend-breadcrumb { display: flex; align-items: center; gap: var(--tend-space-2); font-size: var(--tend-text-sm); color: var(--tend-muted); } .tend-breadcrumb a { color: var(--tend-link); text-decoration: none; } .tend-breadcrumb .sep { color: var(--tend-subtle); } .tend-breadcrumb .crumb-current { color: var(--tend-ink); font-weight: var(--tend-weight-medium); } .tend-identity { display: flex; align-items: center; gap: var(--tend-space-3); font-size: var(--tend-text-sm); color: var(--tend-muted); } .tend-identity .tend-church { font-weight: var(--tend-weight-medium); color: var(--tend-ink); } .tend-role-chip { font-size: var(--tend-text-xs); font-weight: var(--tend-weight-semibold); letter-spacing: var(--tend-tracking-wide); text-transform: uppercase; padding: 2px var(--tend-space-2); border-radius: var(--tend-radius-full); background: var(--tend-sage-100); color: var(--tend-forest-700); } .tend-topbar-action { margin-left: var(--tend-space-3); } .tend-shell-content { grid-area: content; padding: var(--tend-space-8) var(--tend-space-8) var(--tend-space-16); max-width: var(--tend-measure-wide); } /* MeetingSubnav: Review · Outputs segmented control (meeting-scoped). */ .tend-subnav { display: inline-flex; gap: 2px; margin: 0 0 var(--tend-space-6); padding: 2px; border-radius: var(--tend-radius); background: var(--tend-sunk); border: 1px solid var(--tend-border); } .tend-subnav-item { padding: var(--tend-space-1) var(--tend-space-4); border-radius: var(--tend-radius-sm); font-size: var(--tend-text-sm); font-weight: var(--tend-weight-medium); color: var(--tend-muted); text-decoration: none; } .tend-subnav-item.active { background: var(--tend-surface-2); color: var(--tend-forest-700); box-shadow: var(--tend-shadow-sm); } /* DataTable: data-legible rows, zebra stripe formalized to --tend-sunk. */ .tend-table { width: 100%; border-collapse: collapse; font-size: var(--tend-text-sm); } .tend-table th { text-align: left; font-weight: var(--tend-weight-semibold); color: var(--tend-muted); border-bottom: 1px solid var(--tend-border); padding: var(--tend-space-2) var(--tend-space-3); height: var(--tend-row-h); } .tend-table td { padding: var(--tend-space-2) var(--tend-space-3); height: var(--tend-row-h); border-bottom: 1px solid var(--tend-border); vertical-align: middle; } .tend-table tbody tr:nth-child(even) { background: var(--tend-sunk); } .tend-table.compact th, .tend-table.compact td { height: var(--tend-row-h-compact); } /* ProvenanceNote: AI-origin labeling (always visually quarantined). */ .tend-provenance { font-size: var(--tend-text-xs); color: var(--tend-muted); border-left: 3px solid var(--tend-sage-400); padding-left: var(--tend-space-3); } /* TestimonyBlock: verbatim reader (never AI-modified content). */ .tend-testimony { white-space: pre-wrap; line-height: var(--tend-leading-read); border-left: 3px solid var(--tend-border); margin: var(--tend-space-4) 0; padding: var(--tend-space-1) 0 var(--tend-space-1) var(--tend-space-4); } /* BrandMark: the inlined ring+dot mark (currentColor) replacing the orphaned SVGs. */ .tend-brandmark { display: inline-block; vertical-align: middle; } /* Tablet collapse: stack the sidebar above the content below the tablet bp. */ @media (max-width: 960px) { .tend-shell { grid-template-columns: 1fr; grid-template-rows: auto var(--tend-shell-topbar-h) 1fr; grid-template-areas: "nav" "topbar" "content"; } .tend-shell-nav { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: none; border-bottom: 1px solid var(--tend-slate-900); padding: var(--tend-space-2) var(--tend-space-4); } .tend-shell-nav .tend-shell-brand { padding: 0 var(--tend-space-3) 0 0; } .tend-shell-nav .tend-shell-nav-list { flex-direction: row; gap: var(--tend-space-2); } .tend-shell-nav .tend-shell-foot { display: none; } .tend-shell-content { max-width: 100%; padding: var(--tend-space-6) var(--tend-space-4) var(--tend-space-12); } } /* Coarse pointer (tablet/touch): grow tap targets. */ @media (pointer: coarse) { .tend-nav-item, .tend-subnav-item { min-height: var(--tend-touch-min); padding-top: var(--tend-tap-pad); padding-bottom: var(--tend-tap-pad); } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---- Public intake (phone-first; 16px base avoids iOS zoom) ------------- */ .intake { max-width: 68ch; } .intake input, .intake select, .intake textarea { font-size: 16px; } .intake-stepper { list-style: none; display: flex; flex-wrap: wrap; gap: var(--tend-space-1); padding: 0; margin: 0 0 var(--tend-space-5); font-size: .8rem; } .intake-stepper li { color: var(--tend-muted); padding: var(--tend-space-1) var(--tend-space-2); border-radius: var(--tend-radius-sm); } .intake-stepper li.done { color: var(--tend-forest-700); } .intake-stepper li.current { background: var(--tend-forest-700); color: #fff; font-weight: 600; } .intake-stepper a { color: inherit; text-decoration: underline; } .form-field { display: block; margin: var(--tend-space-4) 0; } .form-field > span { display: block; font-weight: 600; margin-bottom: var(--tend-space-1); } .form-field > span em { font-weight: 400; color: var(--tend-muted); font-style: normal; font-size: .85rem; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: var(--tend-space-2) var(--tend-space-3); min-height: 44px; border: 1px solid var(--tend-border); border-radius: var(--tend-radius); background: #fff; font: inherit; } .form-field textarea { min-height: 8rem; } .form-check { display: flex; align-items: flex-start; gap: var(--tend-space-2); margin: var(--tend-space-3) 0; min-height: 44px; } .form-check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; } .inline-error { display: block; color: var(--tend-danger); font-size: .82rem; margin-top: var(--tend-space-1); } .form-banner-error { color: var(--tend-danger); background: var(--tend-danger-bg); border-radius: var(--tend-radius); padding: var(--tend-space-3) var(--tend-space-4); } .section-summary { color: var(--tend-danger); background: var(--tend-danger-bg); border-radius: var(--tend-radius-md); padding: var(--tend-space-3) var(--tend-space-4); margin: var(--tend-space-4) 0; } .section-summary ul { margin: var(--tend-space-1) 0 0; padding-left: var(--tend-space-5); } .char-counter { display: block; color: var(--tend-muted); font-size: .8rem; margin-top: var(--tend-space-1); } .char-counter.over { color: var(--tend-danger); font-weight: 600; } .callout { background: var(--tend-info-bg); color: var(--tend-info); border-radius: var(--tend-radius); padding: var(--tend-space-3) var(--tend-space-4); margin: var(--tend-space-4) 0; } .class-checklist, .commitment-group, .children-group { border: 1px solid var(--tend-border); border-radius: var(--tend-radius-md); padding: var(--tend-space-4); margin: var(--tend-space-4) 0; } .class-checklist legend, .children-group legend { font-weight: 600; padding: 0 var(--tend-space-1); } .testimony-prompts { margin: var(--tend-space-1) 0 var(--tend-space-4); padding-left: var(--tend-space-4); } .photo-picker .photo-preview { display: flex; align-items: center; gap: var(--tend-space-3); margin-top: var(--tend-space-2); } .photo-picker #photo-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--tend-radius); border: 1px solid var(--tend-border); } .child-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tend-space-2); margin: var(--tend-space-2) 0; } .child-row input, .child-row select { width: 100%; box-sizing: border-box; min-width: 0; padding: var(--tend-space-2) var(--tend-space-3); min-height: 44px; border: 1px solid var(--tend-border); border-radius: var(--tend-radius); font: inherit; } .hidden { display: none; } .sticky-action-bar { position: sticky; bottom: 0; background: var(--tend-surface); border-top: 1px solid var(--tend-border); padding: var(--tend-space-3) 0; margin-top: var(--tend-space-6); } .sticky-action-bar .btn { width: 100%; min-height: 44px; } .intake-honeypot { position: absolute; left: -9999px; } /* gender is a short select; give the date input more room so it isn't cramped. */ @media (min-width: 600px) { .child-row { grid-template-columns: 1fr 1fr 0.8fr 1.2fr; } } /* ========================================================================== Pipeline dashboard (plan 04 §5.3): page head, rail nodes, stage sections, the per-stage DataTable. .tend-stage-rail / .tend-pill / .tend-pill-info are defined above (plan 01); only the new dashboard classes live here. ========================================================================== */ .tend-page-head { margin:0 0 1.25rem; } .tend-page-head h1 { margin:0 0 .15rem; } .tend-rail-node { display:flex; flex-direction:column; gap:.05rem; flex:0 0 7rem; min-width:0; padding:.45rem .7rem; border:1px solid var(--tend-border); border-radius:var(--tend-radius); background:var(--tend-surface); } .tend-rail-count { font-size:1.2rem; font-weight:700; font-family:var(--tend-font-display); color:var(--tend-forest-800); line-height:1.2; } .tend-rail-title { font-weight:600; font-size:.9rem; } .tend-rail-desc { font-size:.78rem; color:var(--tend-muted); } .tend-stage-section { margin-bottom:1rem; } .tend-stage-section-head { display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; } .tend-stage-section-head h2 { margin:0; font-size:1.05rem; } .tend-data-table { width:100%; border-collapse:collapse; } .tend-data-table th { text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tend-muted); padding:.35rem .5rem; border-bottom:1px solid var(--tend-border); } .tend-data-table td { padding:.5rem .5rem; border-bottom:1px solid var(--tend-border); height:var(--tend-row-h); vertical-align:middle; } .tend-data-table tbody tr:nth-child(even) { background:var(--tend-sunk); } .tend-empty-row { padding:.5rem; margin:0; } .tend-pill-muted { background:var(--tend-slate-100); color:var(--tend-slate-600); } /* ========================================================================== Applicant record (plan 04 §5.4): header band, read-only status rail, the two-column grid, key-fact tables, the content-free timeline, banners. The button/input/mono classes are defined above (plan 01); only the new record classes live here. ========================================================================== */ .tend-record-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; } .tend-record-ident { display:flex; gap:.75rem; align-items:center; } .tend-record-ident h1 { margin:0; } /* email/phone line is optional + de-emphasized (F12) */ .tend-record-ident p { margin:.15rem 0 0; } .tend-record-photo { width:4rem; height:4rem; border-radius:.6rem; object-fit:cover; flex:none; } /* neutral, palette-matching placeholder when there's no photo (F13) — never off-palette */ .tend-record-photo-empty { background:var(--tend-sage-100); border:1px solid var(--tend-border); } .tend-record-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; } .tend-status-rail { display:flex; gap:.4rem; margin:0 0 1.25rem; flex-wrap:wrap; } .tend-status-node { padding:.25rem .65rem; border-radius:.4rem; font-size:.8rem; background:var(--tend-slate-100); color:var(--tend-slate-600); } .tend-status-node.tend-status-done { background:var(--tend-sage-100); color:var(--tend-forest-700); } .tend-status-node.tend-status-active { background:var(--tend-forest-700); color:#fff; font-weight:600; } .tend-record-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(16rem,1fr); gap:1rem; } @media (max-width: 960px) { .tend-record-grid { grid-template-columns:1fr; } } /* Record cards: denser than the default card — the headings used the big base h2 (text-3xl) and full 1.5rem padding, making the page feel oversized (F14 view density). Scope smaller headings + tighter padding here. */ .tend-record-main > .tend-card, .tend-record-side > .tend-card { padding: var(--tend-space-4) var(--tend-space-5); margin-bottom:.75rem; } .tend-record-main .tend-card h2, .tend-record-side .tend-card h2 { font-size:1.05rem; margin:0 0 .55rem; } .tend-keyfacts { display:grid; grid-template-columns:max-content 1fr; gap:.35rem .9rem; margin:0; } .tend-keyfacts dt { color:var(--tend-muted); font-size:.85rem; } .tend-keyfacts dd { margin:0; } /* Edit-record form (F14): labels ABOVE inputs on a 2-col grid (was cramped inline labels with mismatched widths). Scoped to .tend-record-edit so the fieldset/ legend reset doesn't touch other screens' fieldsets (checklist, vote). */ .tend-record-edit { padding: var(--tend-space-6) 2rem; } .tend-record-edit fieldset { border:none; padding:0; margin:0 0 var(--tend-space-5); } .tend-record-edit legend { font-weight:600; color:var(--tend-forest-700); font-size:1rem; margin-bottom:var(--tend-space-3); padding:0; } /* generous column gap so the two columns read as separated, not crammed (F14) */ .tend-form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--tend-space-3) 2.5rem; } .tend-form-grid label { display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; color:var(--tend-muted); } .tend-form-grid label .tend-input { width:100%; font-size:.95rem; color:var(--tend-ink); } .tend-form-grid .tend-form-full { grid-column:1 / -1; } .tend-form-grid textarea.tend-input { min-height:4rem; } @media (max-width: 680px) { .tend-form-grid { grid-template-columns:1fr; } } .tend-timeline { list-style:none; margin:0; padding:0; } .tend-timeline li { display:flex; justify-content:space-between; gap:.6rem; padding:.3rem 0; border-bottom:1px solid var(--tend-border); font-size:.85rem; } .tend-break { word-break:break-all; } .tend-form-actions { display:flex; gap:.6rem; align-items:center; margin-top:1rem; } .tend-btn-link { background:transparent; border:none; color:var(--tend-link); padding:.55rem 0; } .tend-banner { padding:.65rem 1rem; border-radius:var(--tend-radius); margin:0 0 1rem; font-size:.9rem; } .tend-banner-ok { background:var(--tend-success-bg); color:var(--tend-success); } .tend-banner-err { background:var(--tend-danger-bg); color:var(--tend-danger); } /* ---- Membership interview surface (spec §5.5) ----------------------------- */ /* Laptop-primary three-zone working area; reflows/stacks below the tablet bp. */ /* NOTE: the shared .tend-banner family is already defined above — not redefined here (CSS has no dedupe). */ /* Interview header bar + phase tabs (F18 region 1 — replaces the old chip rail). */ .tend-iv-header { display: flex; align-items: center; justify-content: space-between; gap: var(--tend-space-4); background: var(--tend-forest-800); color: #fff; padding: .55rem .9rem; border-radius: var(--tend-radius-md); margin: 0 0 1rem; } .tend-iv-header-left { display: flex; align-items: center; gap: .6rem; min-width: 0; } .tend-iv-name { font-family: var(--tend-font-display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tend-iv-back { color: #fff; text-decoration: none; font-size: 1.5rem; line-height: 1; opacity: .8; } .tend-iv-back:hover { opacity: 1; } /* neutral translucent chip for the stage pill on the dark bar */ .tend-iv-header .tend-stage-badge { background: rgba(255,255,255,.16); color: #fff; } .tend-rec-pill { display: inline-flex; align-items: center; gap: .35rem; background: var(--tend-danger); color: #fff; font-weight: 600; font-size: .8rem; padding: .2rem .6rem; border-radius: var(--tend-radius-full); font-variant-numeric: tabular-nums; } .tend-capture-strip { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .tend-capture-strip form { margin: 0; } .tend-capture-strip .tend-btn { min-height: var(--tend-touch-min); } /* Consent strip (F18 region 2): chip left, capture controls right, one row. */ .tend-consent-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; } .tend-capture-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .tend-capture-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: var(--tend-touch-min); text-align: left; } .tend-capture-label { font-weight: 600; } .tend-capture-sub { font-size: .72rem; font-weight: 400; opacity: .8; } /* dense reference sub-heads in the interview Application zone (F18 region 3) */ .tend-ref-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tend-muted); font-weight: 600; margin: .9rem 0 .35rem; } /* AI-notes zone header + honest LIVE pill + aspiration caption (F18 region 4) */ .tend-iv-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .tend-live-pill { display: inline-flex; align-items: center; gap: .3rem; background: var(--tend-danger); color: #fff; font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: var(--tend-radius-full); } .tend-ai-aspiration { margin: .7rem 0 0; font-size: .8rem; color: var(--tend-warning); background: var(--tend-warning-bg); border-radius: var(--tend-radius); padding: .4rem .55rem; } /* sticky wrap-up footer (F18 region 5 / D4 two-tap) */ .tend-iv-footer { position: sticky; bottom: 0; margin: 1.25rem 0 0; padding: .75rem 0; border-top: 1px solid var(--tend-border); background: var(--tend-bg); } .tend-iv-footer-form { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 0; } .tend-iv-wrapup { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--tend-muted); } .tend-iv-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1rem; align-items: start; max-width: var(--tend-measure-wide); } .tend-iv-zone { border: 1px solid var(--tend-border); border-radius: var(--tend-radius-md); background: var(--tend-surface); padding: 1.1rem; max-height: 70vh; overflow: auto; } .tend-iv-zone h2 { margin: 0 0 .6rem; font-size: 1.05rem; } .tend-iv-right { display: flex; flex-direction: column; gap: 1rem; } .tend-checklist { margin: 0; padding: 0; list-style: none; } .tend-checklist li { display: flex; align-items: flex-start; gap: .5rem; margin: .35rem 0; font-size: .95rem; } .tend-checklist input[type="checkbox"] { min-width: var(--tend-touch-min); min-height: 1.1rem; margin-top: .15rem; } @media (pointer: coarse) { .tend-capture-strip .tend-btn, .tend-checklist input[type="checkbox"] { padding: var(--tend-tap-pad); } } /* iPad target resolved (spec §8): the three-zone grid stacks at the tablet breakpoint = plan-01's --tend-shell-bp-tablet (960px). This keeps iPad LANDSCAPE (≈1024) on the laptop-like three-column grid and stacks iPad PORTRAIT (768) — matching §5.5's "no dedicated tablet-held variant; reflows acceptably." A @media condition cannot read a CSS custom property, so the 960px literal must equal --tend-shell-bp-tablet; keep them in sync. */ @media (max-width: 960px) { .tend-iv-grid { grid-template-columns: 1fr; } .tend-iv-zone { max-height: none; } } /* ---- Meetings / Review / Outputs components (plan 06) ---- */ /* NOTE: .tend-rail-node, .tend-subnav*, .tend-testimony, .tend-provenance are defined earlier (plan 01 / prior sessions); not redefined here. */ .tend-candidate-rail { display:flex; flex-wrap:wrap; gap:.4rem; } .tend-candidate-list { list-style:none; margin:.75rem 0 .25rem; padding:0; } .tend-candidate-row { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.4rem 0; border-top:1px solid var(--tend-border); font-size:.9rem; } .tend-candidate-name { flex:1 1 12rem; min-width:0; } .tend-pco-status { flex:1 1 100%; } .tend-pco-failed { color:var(--tend-danger, #b3261e); font-weight:600; } /* Meetings redesign: clean card action group + the bottom assign roster. */ .tend-card-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 0; } /* Open-meeting card header: meta on the left, the meeting's derived actions (Review / Outputs) pinned top-right as solid buttons to save vertical space. */ .tend-meeting-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem; } .tend-meeting-meta { min-width:0; } .tend-meeting-actions { display:flex; flex-direction:column; gap:.4rem; flex-shrink:0; } .tend-meeting-actions .tend-btn { text-align:center; white-space:nowrap; } .tend-assign-list { list-style:none; margin:0; padding:0; } .tend-assign-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.5rem 0; border-top:1px solid var(--tend-border); } .tend-assign-row:first-child { border-top:none; } .tend-assign-name { font-size:.95rem; } .tend-assign-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0; } /* var() carries a literal fallback so the layout still holds when plan 01's measure/shell tokens are absent. */ .tend-twopane { display:grid; grid-template-columns: 16rem minmax(0, var(--tend-measure-wide, 64rem)); gap:1.5rem; align-items:start; } .tend-twopane-index { position:sticky; top:calc(var(--tend-shell-topbar-h, 48px) + 1rem); border:1px solid var(--tend-border); border-radius:var(--tend-radius-md); padding:.5rem; background:var(--tend-surface); } .tend-index-head { font-weight:700; margin:.25rem .5rem .5rem; } .tend-index-group { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tend-muted); margin:.6rem .5rem .25rem; } .tend-index-row { display:block; padding:.4rem .5rem; border-radius:var(--tend-radius-sm); text-decoration:none; color:var(--tend-ink); font-size:.9rem; } .tend-index-row:hover { background:var(--tend-sunk); } /* Current candidate in the Review stepper (F24): a left-rail highlight. */ .tend-index-row.active { background:var(--tend-sunk); box-shadow:inset 3px 0 0 var(--tend-forest-700); font-weight:var(--tend-weight-semibold); } /* Prev/Next candidate stepper at the foot of the packet. */ .tend-pager { display:flex; justify-content:space-between; gap:.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--tend-border); } .tend-btn-disabled { opacity:.4; pointer-events:none; } .tend-twopane-main { min-width:0; } /* NOTE: a CSS @media query cannot read a custom property — `max-width: var(...)` is invalid and silently ignored. Use the literal tablet breakpoint (960px). */ @media (max-width: 960px) { .tend-twopane { grid-template-columns: 1fr; } .tend-twopane-index { position:static; } } .tend-packet-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; } .tend-tier-tag { font-size:.74rem; letter-spacing:.04em; color:var(--tend-muted); border:1px solid var(--tend-border); border-radius:999px; padding:.1rem .5rem; } .tend-section-head { margin:.85rem 0 .25rem; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tend-forest-700); } .tend-fact { margin:.18rem 0; font-size:.92rem; } .tend-vote-footer { margin-top:1rem; border-top:1px solid var(--tend-border); padding-top:1rem; } .tend-vote-fieldset { border:none; margin:0; padding:0; } .tend-vote-fieldset legend { font-weight:600; margin-bottom:.4rem; } .tend-vote-fieldset label { display:block; margin:.25rem 0; } .tend-decided { margin:1rem 0 0; border-top:1px solid var(--tend-border); padding-top:1rem; } .tend-render-list { margin:.3rem 0 .6rem; padding-left:1.1rem; font-size:.9rem; } .tend-presenter-row { border-top:1px solid var(--tend-border); padding-top:.6rem; margin-top:.6rem; } /* Admin (§5.9): job rows, the guard-railed config warning, search results, the vendor subheads, plus the section-level alert + pco-id helpers the admin page needs. .tend-btn-link already exists above (record-side panel); only the danger variant is added here. .tend-muted is added as a CLASS (the admin page uses class="tend-muted" ~12x; the legacy pages used the bare "muted" alias). */ .tend-job-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--tend-row-h); padding: .55rem 0; border-top: 1px solid var(--tend-border); } .tend-job-row:first-of-type { border-top: 0; } .tend-job-row .tend-job-meta { color: var(--tend-slate-600); font-size: .85rem; } .tend-config-warning { border: 1px solid var(--tend-warning); background: var(--tend-warning-bg); color: var(--tend-warning); border-radius: .4rem; padding: .6rem .75rem; font-size: .9rem; margin: 0 0 1rem; } .tend-search-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--tend-row-h); padding: .5rem 0; border-top: 1px solid var(--tend-border); } /* pco-id is the mono authorization-key treatment (also used standalone in the elders table + config cards, not only inside a search result). */ .tend-pco-id { font-family: var(--tend-font-mono); font-size: .8rem; color: var(--tend-slate-600); } .tend-vendor-subhead { text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--tend-border); padding-bottom: .25rem; margin: 1.25rem 0 .6rem; font-size: .9rem; font-weight: var(--tend-weight-medium); color: var(--tend-slate-600); } /* Admin layout (F26/F28): the page is grouped into labelled sections with a consistent type scale; editable text fields are capped so they don't run to the page edge (number inputs keep their own fixed widths). */ .tend-admin { max-width: var(--tend-measure-wide); margin: 0 auto; padding: 1.5rem; } /* Section headers must read as the TOP of the page hierarchy — above the card titles nested under them. A darker, tracked label over a full-width hairline rule gives them section weight without shouting (F26/#2). */ .tend-admin-group { font-size: var(--tend-text-sm); font-weight: var(--tend-weight-bold); letter-spacing: var(--tend-tracking-caps); text-transform: uppercase; color: var(--tend-forest-700); margin: 2.25rem 0 .85rem; padding-bottom: .4rem; border-bottom: 1px solid var(--tend-border); } .tend-admin-group:first-of-type { margin-top: .25rem; } /* Card titles sit BELOW the bold uppercase group dividers, so they read as a medium-weight title, not another bold heading (keeps the hierarchy and avoids the page being a wall of bold). */ .tend-admin-card-title { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: var(--tend-weight-medium); } .tend-admin-sub { margin: 0 0 1rem; font-size: .9rem; } .tend-admin-field { width: 100%; max-width: 32rem; box-sizing: border-box; } /* Plain-language field-mapping key/value list (F27). */ .tend-admin-kv { margin: .25rem 0 1rem; } .tend-admin-kv dt { font-weight: var(--tend-weight-medium); font-size: .9rem; margin-top: .6rem; } .tend-admin-kv dd { margin: .1rem 0 0; font-size: .92rem; } /* Lifecycle job rows: a plain-language description under the label. */ .tend-job-info { min-width: 0; } .tend-job-desc { margin: .2rem 0 0; font-size: .85rem; max-width: 46rem; } /* Section-level confirmation/error banners (full-width, above the cards). */ .tend-alert { border-radius: .4rem; padding: .6rem .75rem; font-size: .9rem; margin: 0 0 1rem; border: 1px solid transparent; } .tend-alert-ok { border-color: var(--tend-success); background: var(--tend-success-bg); color: var(--tend-success); } .tend-alert-error { border-color: var(--tend-danger); background: var(--tend-danger-bg); color: var(--tend-danger); } /* The danger variant of the link-styled button (Deactivate). The base .tend-btn-link is defined above. */ .tend-btn-link.tend-btn-danger { background: none; color: var(--tend-danger); } /* Muted secondary/metadata text as a CLASS (maps to the same token the legacy inline styles used). */ .tend-muted { color: var(--tend-muted); }