/* ============================================================================ Talemia Interviews — base stylesheet Built on the brief's design tokens. Uses logical properties throughout so RTL (Arabic) and LTR (English) mirror automatically from the . No build step; plain CSS. ========================================================================== */ /* ── Fonts ─────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Symbio'; src: url('/assets/fonts/SymbioAR-LT-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Symbio'; src: url('/assets/fonts/SymbioAR-LT-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Symbio'; src: url('/assets/fonts/SymbioAR-LT-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Symbio'; src: url('/assets/fonts/SymbioAR-LT-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ── Design tokens (from the brief) ────────────────────────────────────── */ :root { --brand: #21567C; --ink: #173A52; --teal: #2F8E8D; --teal-bright: #36A3A2; --green: #4E9E78; --green-bright: #6BBF99; --green-2: #83C991; --mint: #C6E0C4; --mint-surface: #EDF5EA; --paper: #FBFCFB; --surface: #FFFFFF; --rule: #DBE3E1; --rule-soft: #E9EEEC; --muted: #5C6B70; --muted-2: #8A979B; --amber: #9A6B1E; --amber-bg: #F6EEDD; --red: #9A3B33; --red-bg: #F5E7E5; --slate: #64757B; --slate-bg: #EBEFF0; --blue-bg: #E7EFF5; --teal-bg: #E3F0EF; --green-bg: #E7F2EB; --maxw: 1180px; --sans: 'Symbio', 'Segoe UI', Tahoma, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(23, 58, 82, 0.06), 0 8px 24px rgba(23, 58, 82, 0.06); } /* ── Reset & base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-size: 106.25%; } /* 17px base — clearer numbers */ body { margin: 0; font-family: var(--sans); font-weight: 400; line-height: 1.65; color: var(--ink); background: var(--paper); display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3 { color: var(--brand); line-height: 1.25; font-weight: 700; } p { margin: 0 0 var(--space-4); } a { color: var(--brand); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); } /* ── Skip link & focus ─────────────────────────────────────────────────── */ .skip-link { position: absolute; inset-block-start: -3rem; inset-inline-start: var(--space-4); background: var(--brand); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 10; transition: inset-block-start 0.15s ease; } .skip-link:focus { inset-block-start: var(--space-3); } :focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 2px; border-radius: 4px; } /* ── Header ────────────────────────────────────────────────────────────── */ .site-header { background: var(--surface); border-block-end: 1px solid var(--rule); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; } .brand__logo { block-size: 3.6rem; inline-size: auto; display: block; } .brand__text { display: flex; flex-direction: column; line-height: 1.2; } .brand__name { font-weight: 500; color: var(--brand); } .brand__tagline { font-size: 0.8125rem; color: var(--muted); } .admin-header .brand__logo { block-size: 2.9rem; } .lang-switch { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-sm); text-decoration: none; color: var(--brand); font-weight: 500; background: var(--surface); } .lang-switch:hover { background: var(--mint-surface); border-color: var(--mint); } /* ── Main & panels ─────────────────────────────────────────────────────── */ .main { flex: 1 0 auto; padding-block: var(--space-8); } .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-8); max-width: 720px; margin-inline: auto; } .panel--centered { text-align: center; } .eyebrow { color: var(--teal); font-weight: 500; font-size: 0.875rem; margin-block-end: var(--space-2); } .page-title { margin-block: 0 var(--space-3); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); } .lead { color: var(--muted); font-size: 1.0625rem; } /* ── Gate ──────────────────────────────────────────────────────────────── */ .gate { margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--rule-soft); } .gate__question { font-weight: 500; color: var(--ink); } .gate__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); } .gate__help { margin-block-end: 0; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); text-decoration: none; font-weight: 500; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: 1rem; } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: var(--ink); } .btn--ghost { background: var(--surface); color: var(--brand); border-color: var(--rule); } .btn--ghost:hover { background: var(--slate-bg); } .form-help { color: var(--muted); font-size: 0.875rem; } /* ── Footer ────────────────────────────────────────────────────────────── */ .site-footer { background: var(--surface); border-block-start: 1px solid var(--rule); margin-block-start: var(--space-8); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-5); color: var(--muted); font-size: 0.875rem; } .site-footer__links a { color: var(--brand); } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .panel { padding: var(--space-6); } .main { padding-block: var(--space-6); } .gate__actions .btn { flex: 1 1 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ── Utilities ─────────────────────────────────────────────────────────── */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .req { color: var(--red); } .ltr-value { direction: ltr; unicode-bidi: plaintext; } .panel--wide { max-width: 960px; } /* ── Progress ──────────────────────────────────────────────────────────── */ .progress { margin-block-end: var(--space-5); } .progress__bar { background: var(--rule-soft); border-radius: 999px; block-size: 6px; overflow: hidden; } .progress__fill { background: var(--teal); block-size: 100%; } .progress__fill--1 { inline-size: 25%; } .progress__fill--2 { inline-size: 50%; } .progress__fill--3 { inline-size: 75%; } .progress__fill--4 { inline-size: 100%; } .progress__label { color: var(--muted); font-size: 0.8125rem; margin-block: var(--space-2) 0; } /* ── Banners ───────────────────────────────────────────────────────────── */ .banner { border: 1px solid var(--rule); border-inline-start-width: 4px; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-block-end: var(--space-5); font-size: 0.9375rem; } .banner--error { background: var(--red-bg); border-inline-start-color: var(--red); color: var(--red); } .banner--warn { background: var(--amber-bg); border-inline-start-color: var(--amber); color: var(--amber); } .banner--info { background: var(--blue-bg); border-inline-start-color: var(--brand); color: var(--ink); } .banner__meta { display: block; font-size: 0.8125rem; margin-block-start: var(--space-1); opacity: 0.85; } /* ── Fields ────────────────────────────────────────────────────────────── */ .field { margin-block-end: var(--space-5); } .field__label { display: block; font-weight: 500; margin-block-end: var(--space-2); } .field__optional { color: var(--muted-2); font-weight: 400; font-size: 0.875rem; } .field__input, .field__select { inline-size: 100%; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--ink); } .field__input--mono { font-family: var(--mono); letter-spacing: 0.02em; } .field__input:focus, .field__select:focus { border-color: var(--teal); outline: none; } .field__input[readonly] { background: var(--slate-bg); color: var(--muted); } .field__hint { color: var(--muted); font-size: 0.8125rem; margin-block: var(--space-2) 0; } .field__error { color: var(--red); font-size: 0.8125rem; margin-block: var(--space-2) 0; } .field__group { display: flex; gap: var(--space-2); } .field__select--code { inline-size: auto; flex: 0 0 auto; font-family: var(--mono); } .field--check .checkbox { display: flex; gap: var(--space-2); align-items: start; } .radio { display: inline-flex; gap: var(--space-2); align-items: center; margin-inline-end: var(--space-5); } /* ── Booking layout: calendar + slots ──────────────────────────────────── */ .booking-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: start; } .calendar__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); } .calendar__title { margin: 0; font-size: 1.125rem; } .calendar__navbtn { padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); text-decoration: none; color: var(--brand); font-size: 0.875rem; background: var(--surface); } .calendar__navbtn[aria-disabled="true"] { color: var(--muted-2); border-style: dashed; cursor: not-allowed; } .calendar__grid { inline-size: 100%; border-collapse: collapse; table-layout: fixed; } .calendar__grid th { font-size: 0.75rem; color: var(--muted); font-weight: 500; padding-block: var(--space-2); } .calendar__grid th abbr { text-decoration: none; } .day { padding: 2px; vertical-align: top; } .day__link { display: flex; flex-direction: column; gap: 2px; min-block-size: 3.2rem; padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; border: 1px solid transparent; color: var(--ink); } .day__link--static { cursor: default; } .day__num { font-weight: 500; } .day__meta { font-size: 0.6875rem; line-height: 1.2; } .day--open .day__link { background: var(--green-bg); } .day--open .day__meta { color: var(--green); } .day--low .day__link { background: var(--amber-bg); } .day--low .day__meta { color: var(--amber); } .day--full .day__link { background: var(--slate-bg); } .day--full .day__meta { color: var(--slate); } .day--muted .day__meta, .day--outside .day__num { color: var(--muted-2); } .day--outside { opacity: 0.5; } .day--today .day__link { outline: 2px solid var(--teal-bright); outline-offset: -2px; } .day--selected .day__link { background: var(--brand); color: #fff; } .day--selected .day__meta { color: #E7EFF5; } a.day__link:hover { border-color: var(--teal); } .legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; margin-block: var(--space-4) 0; font-size: 0.8125rem; color: var(--muted); } .legend__item { display: inline-flex; align-items: center; gap: var(--space-2); } .legend__swatch { inline-size: 0.9rem; block-size: 0.9rem; border-radius: 3px; display: inline-block; } .legend__swatch--open { background: var(--green-2); } .legend__swatch--low { background: var(--amber); } .legend__swatch--full { background: var(--slate); } .legend__swatch--muted { background: var(--rule); } .slots { border-inline-start: 1px solid var(--rule-soft); padding-inline-start: var(--space-5); } .slots__hint { color: var(--muted); } .slots__day { font-size: 1.0625rem; margin-block: 0 var(--space-1); } .slots__tz { color: var(--muted); font-size: 0.8125rem; margin-block: 0 var(--space-4); } .slotgroup { border: none; padding: 0; margin: 0 0 var(--space-5); } .slotgroup__label { font-weight: 500; color: var(--teal); font-size: 0.875rem; padding: 0; margin-block-end: var(--space-3); } .slotgroup__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); } .slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--surface); font-family: inherit; font-size: 0.95rem; color: var(--ink); cursor: pointer; text-align: center; } .slot__time { font-variant-numeric: tabular-nums; } .slot__note { font-size: 0.6875rem; color: var(--muted); } .slot--available:hover { border-color: var(--teal); background: var(--teal-bg); } .slot--taken, .slot--held { cursor: not-allowed; background: var(--slate-bg); color: var(--muted); border-style: dashed; } /* ── Details layout ────────────────────────────────────────────────────── */ .details-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-6); align-items: start; } .summary-card { background: var(--mint-surface); border: 1px solid var(--mint); border-radius: var(--radius); padding: var(--space-5); position: sticky; inset-block-start: var(--space-4); } .summary-card__title { font-size: 1rem; margin-block: 0 var(--space-3); } .summary-card__list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; } .summary-card__list dt { color: var(--muted); font-size: 0.875rem; } .summary-card__list dd { margin: 0; font-weight: 500; } .hold-timer { margin-block: var(--space-4) var(--space-2); font-weight: 500; color: var(--brand); font-variant-numeric: tabular-nums; } /* ── Confirmation ──────────────────────────────────────────────────────── */ .success-mark { inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; font-size: 1.6rem; margin-block-end: var(--space-4); } .page-title--success { color: var(--green); } .summary-box { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5); margin-block: var(--space-5); } .summary-box dt { color: var(--muted); } .summary-box dd { margin: 0; font-weight: 500; } .reference { font-family: var(--mono); font-weight: 500; letter-spacing: 0.04em; } .actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); } /* ── Appointment (S8) ──────────────────────────────────────────────────── */ .appointment__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .appointment__meta { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; } .pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; } .pill--ok { background: var(--green-bg); color: var(--green); } .countdown { text-align: center; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-8) var(--space-5); margin-block: var(--space-5); } .countdown--in_progress { background: var(--green-bg); border-color: var(--green-2); } .countdown--ended { background: var(--slate-bg); } .countdown--under_1h { background: var(--amber-bg); border-color: var(--amber); } .countdown__units { display: inline-flex; gap: var(--space-4); } .cd-unit { display: flex; flex-direction: column; min-inline-size: 3.5rem; } .cd-unit__n { font-size: 2.4rem; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.1; } .cd-unit__l { font-size: 0.75rem; color: var(--muted); } .countdown__big { font-size: 2.2rem; font-weight: 700; color: var(--brand); margin: 0; } .countdown__copy { color: var(--ink); margin-block: var(--space-3) 0; } .countdown__when { color: var(--muted); font-size: 0.9375rem; margin-block: var(--space-4) 0; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); } .card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5); } .card__title { font-size: 1rem; margin-block: 0 var(--space-4); } .kv { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; } .kv dt { color: var(--muted); font-size: 0.875rem; } .kv dd { margin: 0; } .queue__line { font-size: 1.0625rem; font-weight: 500; } .queue__sub { color: var(--muted); font-size: 0.875rem; margin-block: var(--space-2) 0; } .history { list-style: none; padding: 0; margin: 0; } .history__item { padding-block: var(--space-2); border-block-end: 1px solid var(--rule-soft); font-size: 0.9375rem; } .history__item:last-child { border-block-end: none; } @media (max-width: 720px) { .booking-layout, .details-layout { grid-template-columns: 1fr; } .slots { border-inline-start: none; padding-inline-start: 0; border-block-start: 1px solid var(--rule-soft); padding-block-start: var(--space-5); } .summary-card { position: static; } .cd-unit__n { font-size: 1.8rem; } .day__link { min-block-size: 2.8rem; } } /* ── Admin (Phase 3) ──────────────────────────────────────────────────────── */ .admin-header .brand__name { font-weight: 600; } .admin-nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .admin-nav a { color: var(--brand); text-decoration: none; } .admin-nav a:hover { text-decoration: underline; } .admin-nav__logout { margin: 0; } .btn--sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; } .btn--danger { color: var(--red); border-color: var(--red); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-block: var(--space-5); } .kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-5); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "icon value" "icon change"; column-gap: var(--space-4); row-gap: 0.15rem; align-content: center; } .kpi__icon { grid-area: icon; align-self: center; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--teal-bg); color: var(--teal); } .kpi__icon .ico { inline-size: 1.5rem; block-size: 1.5rem; } .kpi__label { grid-area: label; color: var(--muted); font-size: 0.9rem; } .kpi__value { grid-area: value; font-size: 2.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi__change { grid-area: change; font-size: 0.85rem; color: var(--muted); } .kpi__change--up { color: var(--green); } .kpi__change--down { color: var(--red); } .kpi__change--flat { color: var(--muted-2); } .kpi__prev { color: var(--muted-2); display: inline-block; margin-inline-start: 0.4rem; } .bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .bars__row { display: grid; grid-template-columns: 9rem 1fr 3rem; align-items: center; gap: var(--space-3); } .bars__label { color: var(--muted); font-size: 0.9rem; } .bars__value { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; } progress.bars__bar { inline-size: 100%; block-size: 0.9rem; appearance: none; -webkit-appearance: none; border: none; border-radius: var(--radius-sm); background: var(--rule-soft); overflow: hidden; } progress.bars__bar::-webkit-progress-bar { background: var(--rule-soft); border-radius: var(--radius-sm); } progress.bars__bar::-webkit-progress-value { background: var(--teal); border-radius: var(--radius-sm); } progress.bars__bar::-moz-progress-bar { background: var(--teal); border-radius: var(--radius-sm); } progress.bars__bar--cancelled::-webkit-progress-value { background: var(--red); } progress.bars__bar--cancelled::-moz-progress-bar { background: var(--red); } progress.bars__bar--no_show::-webkit-progress-value { background: var(--amber); } progress.bars__bar--no_show::-moz-progress-bar { background: var(--amber); } progress.bars__bar--completed::-webkit-progress-value { background: var(--green); } progress.bars__bar--completed::-moz-progress-bar { background: var(--green); } .table { inline-size: 100%; border-collapse: collapse; margin-block: var(--space-4); } .table th, .table td { text-align: start; padding: 0.55rem 0.7rem; border-block-end: 1px solid var(--rule-soft); } .table thead th { color: var(--muted); font-weight: 600; font-size: 0.85rem; border-block-end: 1px solid var(--rule); } .mono { font-family: var(--mono); } .muted { color: var(--muted-2); } .ltr-value { direction: ltr; unicode-bidi: plaintext; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-4); } .toolbar__nav, .toolbar__filter { display: flex; align-items: center; gap: var(--space-2); } .inline-actions { display: inline-flex; gap: var(--space-2); margin: 0; } .stack { display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 640px; } .rule { border: none; border-block-start: 1px solid var(--rule); margin-block: var(--space-5); } .pager { display: flex; align-items: center; gap: var(--space-4); margin-block-start: var(--space-4); } .pager__info { color: var(--muted); } .pill--confirmed { background: var(--blue-bg); color: var(--brand); } .pill--completed { background: var(--green-bg); color: var(--green); } .pill--cancelled { background: var(--red-bg); color: var(--red); } .pill--no_show { background: var(--amber-bg); color: var(--amber); } /* ── Brand identity: hero, logos, ring motif ──────────────────────────────── */ .hero--brand { position: relative; overflow: hidden; background: var(--brand) url('/assets/img/background.png') center / cover no-repeat; border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(2.5rem, 6vw, 4.5rem) var(--space-6); text-align: center; color: #fff; } .hero__inner { max-inline-size: 44rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .hero__logo { block-size: clamp(84px, 12vw, 128px); inline-size: auto; } .hero__eyebrow { margin: 0; color: var(--green-2); font-weight: 500; letter-spacing: 0.02em; } .hero__title { margin: 0; color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 500; line-height: 1.25; } .hero--compact { padding: clamp(1.75rem, 4vw, 2.75rem) var(--space-6); } /* The gate's question card lifts onto the hero for a layered, branded landing. */ .gate-card { max-inline-size: 34rem; margin-inline: auto; margin-block-start: calc(-1 * var(--space-6)); position: relative; z-index: 1; box-shadow: var(--shadow); text-align: center; } .gate-card .gate__actions { justify-content: center; } /* Footer brand + faint ring watermark. */ .site-footer { position: relative; overflow: hidden; } .site-footer::after { content: ""; position: absolute; inset-block-end: -3rem; inset-inline-end: -2rem; inline-size: 12rem; block-size: 12rem; background: url('/assets/img/pattern-1.svg') center / contain no-repeat; opacity: 0.12; pointer-events: none; } .site-footer__brand { display: flex; align-items: center; gap: var(--space-3); } .site-footer__logo { block-size: 3rem; inline-size: auto; } @media (max-width: 640px) { .brand__logo { block-size: 2.5rem; } .gate-card { margin-block-start: var(--space-4); } } /* ── Icons ────────────────────────────────────────────────────────────────── */ .ico { inline-size: 1.15em; block-size: 1.15em; vertical-align: -0.18em; flex: 0 0 auto; } .ico--title { color: var(--teal); vertical-align: -0.12em; } /* Let labels/buttons/links that contain an icon align it neatly with the text. */ .btn, .card__title, .kv dt, .bars__label, .admin-nav a, .admin-nav button, .legend-list__item, .kpi__change { display: inline-flex; align-items: center; gap: 0.5em; } .card__title { display: flex; } .kv dt { gap: 0.55em; } .bars__label { justify-content: flex-start; } /* ── Clearer numbers ──────────────────────────────────────────────────────── */ .reference, .mono, .bars__value, .legend-list__value, .table td, .queue__line, .cd-unit__n, .kpi__value, .donut__num { font-variant-numeric: tabular-nums; } .cd-unit__n { font-size: 3rem; font-weight: 700; } .queue__line { font-size: 1.15rem; } .queue__line strong, .queue__line b { font-weight: 700; } /* ── Donut chart ──────────────────────────────────────────────────────────── */ .donut { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; } .donut__svg { inline-size: 160px; block-size: 160px; flex: 0 0 auto; transform: rotate(-90deg); } .donut__num { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; font-size: 8px; font-weight: 700; fill: var(--ink); font-family: var(--sans); } .donut__cap { transform: rotate(90deg); transform-origin: 21px 21px; text-anchor: middle; font-size: 2.6px; fill: var(--muted); font-family: var(--sans); } .legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 12rem; } .legend-list--inline { flex-direction: row; gap: var(--space-4); margin-block-start: var(--space-3); } .legend-list__item { font-size: 0.95rem; } .legend-list__dot { inline-size: 0.85rem; block-size: 0.85rem; border-radius: 3px; flex: 0 0 auto; } .legend-list__label { flex: 1 1 auto; color: var(--muted); } .legend-list__value { font-weight: 700; } .legend-list__dot--confirmed { background: #21567C; } .legend-list__dot--completed { background: #4E9E78; } .legend-list__dot--cancelled { background: #9A3B33; } .legend-list__dot--no_show { background: #9A6B1E; } .legend-list__dot--this { background: #2F8E8D; } .legend-list__dot--prev { background: #C6E0C4; } /* ── Per-day bar chart ────────────────────────────────────────────────────── */ .chart__svg { inline-size: 100%; block-size: auto; max-block-size: 200px; } .chart__lbl { text-anchor: middle; font-size: 9px; fill: var(--muted); font-family: var(--sans); }