/* premium.css: the complete, final version for K Jayaraman & Co.
   It is loaded LAST (after animations.css) in views/layouts/main.ejs.

   What is inside:
   1. Colours, shadows and the serif heading font
   2. Typography
   3. Header, deep navy title bands (no glowing balls), hero
   4. Logo: CA India icon + firm wordmark, and its sizes for phone, tablet and laptop
   5. Buttons, cards, forms, accordion, footer
   6. Smooth light/dark switching
   7. Softer scroll animations

   To go back to the plain site, remove the premium.css link from main.ejs. */

/* ================= 1. TOKENS ================= */
:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 420ms;
  --theme-fade: 900ms; /* length of the light/dark cross-fade */

  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.06), 0 1px 1px rgba(16, 42, 67, 0.04);
  --shadow-md: 0 2px 4px rgba(16, 42, 67, 0.04), 0 14px 32px -10px rgba(16, 42, 67, 0.16);
  --shadow-lg: 0 4px 8px rgba(8, 20, 40, 0.06), 0 32px 64px -18px rgba(8, 20, 40, 0.34);
  --shadow-glow: 0 10px 24px -6px rgba(36, 90, 148, 0.4);

  --ring: color-mix(in srgb, var(--focus) 20%, transparent);
  interpolate-size: allow-keywords;
}

/* Light mode only: slightly deeper tints than the original pale sky blue */
:root[data-theme='light'] {
  --bg-alt: #eef3f9;
  --bg-tint: #e2ebf5;
  --highlight: #e2ebf5;
  --border: #d6e0ec;
}

[data-theme='dark'] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 32px 64px -18px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 10px 24px -6px rgba(108, 159, 190, 0.35);
}

/* ================= 2. TYPOGRAPHY ================= */
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
  accent-color: var(--accent);
}
body {
  overflow-x: clip; /* nothing can ever cause a sideways scroll on phones */
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga';
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1, .hero__title { letter-spacing: -0.02em; }
p, li, dd { text-wrap: pretty; }
.hero__lead, .page-header__intro { line-height: 1.7; }
.prose p, .article__body p { line-height: 1.75; }

/* Small labels stay in the clean sans-serif */
.eyebrow, .sidebar__title, .site-footer__heading { font-family: var(--font-body); letter-spacing: 0.1em; }

::selection { background: color-mix(in srgb, var(--c-gold) 55%, transparent); color: inherit; }

/* Links inside reading text: always underlined, the line thickens on hover */
.prose a:not(.btn),
.article__body a,
.legal-note a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease-soft),
    text-decoration-thickness var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}
.prose a:not(.btn):hover,
.article__body a:hover,
.legal-note a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* ================= 3. HEADER, TITLE BANDS, HERO ================= */
.site-header {
  background: color-mix(in srgb, var(--header-bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  backdrop-filter: saturate(1.5) blur(12px);
  transition: box-shadow var(--t-slow) var(--ease-premium);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--border), 0 12px 28px -14px rgba(16, 42, 67, 0.22); }

/* Title band on every inner page: deep navy (blackish in dark mode) with a fine gold line */
.page-header {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #0e2238 0%, #163a63 55%, #1d4b7d 100%);
  border-bottom: 0;
  color: var(--on-grad-2);
}
[data-theme='dark'] .page-header {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #070b10 0%, #0e1822 55%, #15283a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.page-header::before { display: none; } /* the glowing circle is removed */
.page-header::after {
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold) 0%, color-mix(in srgb, var(--c-gold) 25%, transparent) 65%, transparent 100%);
}
.page-header h1 { color: #ffffff; }
.page-header .eyebrow { color: var(--c-gold); }
.page-header .eyebrow::before { background: var(--c-gold); }
.page-header__intro { color: var(--on-grad-2); }
.page-header .breadcrumbs a { color: var(--on-grad-2); text-decoration: none; }
.page-header .breadcrumbs a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 0.2em; }
.page-header .breadcrumbs [aria-current='page'] { color: #b9cadb; }
.page-header .breadcrumbs li + li::before { color: var(--c-gold); }
.page-header :focus-visible { outline-color: var(--focus-on-dark); }

/* Login page: no glowing circle */
.auth::before { display: none; }

/* Hero: the two glowing orbs are hidden in dark mode and faint in light mode */
.hero__orb { opacity: 0.55; }
[data-theme='dark'] .hero__orb { display: none; }
.hero__title-accent { color: #9fdcef; }
.hero-slider { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hero__chips a { transition: background-color var(--t-med) var(--ease-premium), border-color var(--t-med) var(--ease-premium), transform var(--t-med) var(--ease-premium); }
@media (hover: hover) { .hero__chips a:hover { transform: translateY(-2px); } }

/* ================= 4. LOGO: CA India icon + "K Jayaraman & Co" wordmark ================= */
.brand { flex-direction: row; align-items: center; gap: 0.7rem; min-width: 0; text-decoration: none; }

/* The CA India icon. The picture is stored inside this line, so there is no image file to upload. */
.brand__mark {
  flex-shrink: 0;
  width: 2.7rem;
  height: 2.05rem;
  background: url("data:image/png;base64,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") center / contain no-repeat;
}
[data-theme='dark'] .brand__mark { filter: brightness(1.5) saturate(1.1); } /* keeps the blue readable on black */

/* The firm name. To make the whole name bigger or smaller, change font-size on .wordmark. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-size: 1.12rem;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--heading);
}
.wordmark__name {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: inherit;
}
.wordmark__k { position: relative; display: inline-block; line-height: 1; }
.wordmark__swoosh {
  position: absolute;
  left: -0.2em;
  bottom: 0.14em;
  width: 1.1em;
  height: 0.5em;
  overflow: visible;
  fill: var(--c-gold);
  pointer-events: none;
}
.wordmark__tag {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.4em;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: max(0.36em, 0.5rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
}
.wordmark__tag::before,
.wordmark__tag::after { content: ''; flex: 1 1 0; min-width: 0.5em; height: 1px; }
.wordmark__tag::before { background: linear-gradient(90deg, transparent, var(--c-gold)); }
.wordmark__tag::after { margin-left: -0.22em; background: linear-gradient(90deg, var(--c-gold), transparent); }

/* Footer: white name on the dark background */
.site-footer .wordmark { margin-bottom: 1.2rem; font-size: 1.9rem; color: #ffffff; text-decoration: none; }
.site-footer .wordmark:hover { color: #ffffff; text-decoration: none; }

/* ---- Logo and menu sizes for each screen ---- */
@media (max-width: 21.99rem) {          /* very small phones: the name gets all the room */
  .brand__mark { display: none; }
}
@media (max-width: 39.99rem) {          /* phones: a little shorter header and smaller buttons */
  :root { --header-h: 4rem; }
  .header-actions { gap: 0.4rem; }
  .theme-toggle, .nav-toggle { width: 2.5rem; height: 2.5rem; }
}
@media (min-width: 30rem) { .wordmark { font-size: 1.4rem; } }
@media (min-width: 40rem) {             /* tablets */
  .wordmark { font-size: 1.7rem; }
  .brand__mark { width: 3.4rem; height: 2.6rem; }
}
@media (min-width: 68rem) {             /* laptops and desktops: more room around the name */
  .site-header__inner.container { max-width: 92rem; }
  .site-header__inner { gap: clamp(1.5rem, 2.6vw, 3rem); }
  .brand__mark { width: 3.2rem; height: 2.45rem; }
  .wordmark { font-size: clamp(1.4rem, 2vw, 2.05rem); }
  .nav-link { padding: 0.5rem 0.55rem; font-size: 0.9rem; gap: 0.3rem; }
  .nav-item--login { margin-left: 0.35rem; }
}
@media (min-width: 68rem) and (max-width: 74.99rem) {   /* small laptops: a little tighter */
  .site-header__inner.container { padding-inline: 1rem; }
  .site-header__inner { gap: 1.1rem; }
  .wordmark { font-size: 1.3rem; }
  .nav-link { padding: 0.5rem 0.5rem; }
}
@media (min-width: 90rem) {
  .nav-link { padding: 0.5rem 0.7rem; font-size: 0.93rem; gap: 0.35rem; }
  .nav-item--login { margin-left: 0.5rem; }
}
@media (max-width: 29.99rem) {          /* phones: full-width hero buttons are easy to tap */
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ================= 5. BUTTONS, CARDS, FORMS, ACCORDION, FOOTER ================= */
.btn {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.005em;
  transition: background-color var(--t-med) var(--ease-premium), color var(--t-med) var(--ease-premium),
    border-color var(--t-med) var(--ease-premium), box-shadow var(--t-slow) var(--ease-premium),
    transform var(--t-med) var(--ease-premium);
}
.btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-sm); }
.btn--primary::after,
.btn--light::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-glow); }
  .btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn--secondary:hover, .btn--outline-light:hover { transform: translateY(-1px); }
  .btn--primary:hover::after,
  .btn--light:hover::after { transform: translateX(120%); transition: transform 800ms var(--ease-premium); }
}
.btn:active { transform: translateY(0) scale(0.985); }

.service-card, .resource-card, .team-member, .contact-card, .profile,
.branch-list li, .work-steps__item, .sidebar { box-shadow: var(--shadow-sm); }
.service-card, .resource-card { border-color: color-mix(in srgb, var(--border) 85%, transparent); }

/* Hover line on service cards: gold into blue */
.service-card::before { height: 2px; background: linear-gradient(90deg, var(--c-gold), var(--c-blue-2)); }

@media (hover: hover) {
  .service-card:hover, .resource-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  }
  .team-member:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .contact-card { transition: transform var(--t-med) var(--ease-premium), box-shadow var(--t-med) var(--ease-premium); }
  .contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}

.service-card__icon, .contact-card__icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--tile-bg) 78%, var(--c-cyan)), var(--tile-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -6px color-mix(in srgb, var(--tile-bg) 70%, transparent);
}

.link-list a { transition: background-color var(--t-med) var(--ease-premium), padding-left var(--t-med) var(--ease-premium); }
.facts__row, .principles__row { transition: background-color var(--t-med) var(--ease-soft); }
@media (hover: hover) {
  .link-list a:hover { padding-left: 1.5rem; }
  .facts__row:hover { background: color-mix(in srgb, var(--highlight) 60%, transparent); }
}

/* Forms */
.form-input {
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-premium),
    background-color var(--t-fast) var(--ease-soft);
}
.form-input:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong)); }
.form-input:focus {
  border-color: var(--focus);
  outline: 2px solid var(--focus); /* kept for keyboard users and high-contrast mode */
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--ring);
}

/* Accordion */
.accordion { box-shadow: var(--shadow-sm); transition: box-shadow var(--t-med) var(--ease-premium), border-color var(--t-med) var(--ease-premium); }
.accordion[open] { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  border-radius: var(--radius-lg);
  transition: background-color var(--t-fast) var(--ease-soft);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { background: var(--highlight); }
.accordion summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-slow) var(--ease-premium);
}
.accordion[open] summary::after { transform: translateY(2px) rotate(-135deg); }
@supports selector(::details-content) {
  .accordion::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--t-slow) var(--ease-premium), content-visibility var(--t-slow) allow-discrete;
  }
  .accordion[open]::details-content { block-size: auto; }
}

/* Footer links and back-to-top button */
.site-footer__col a { transition: color var(--t-fast) var(--ease-soft), background-size 320ms var(--ease-premium); }
.to-top { transition: opacity var(--t-slow) var(--ease-premium), translate var(--t-slow) var(--ease-premium),
  visibility 0s linear var(--t-slow), background-color var(--t-fast) var(--ease-soft), box-shadow var(--t-med) var(--ease-premium); }
@media (hover: hover) { .to-top:hover { box-shadow: var(--shadow-md); } }

/* ================= 6. LIGHT / DARK SWITCH =================
   The browser cross-fades the whole page as one picture (see theme.js), which is smooth.
   Elements stop transitioning during the switch so nothing is caught half-way. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: none !important; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-fade);
  animation-timing-function: var(--ease-soft);
}

/* Fallback for browsers without that feature: a short, cheap colour fade */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 400ms var(--ease-soft),
    color 400ms var(--ease-soft),
    border-color 400ms var(--ease-soft),
    fill 400ms var(--ease-soft),
    stroke 400ms var(--ease-soft) !important;
}

/* ================= 7. SOFTER SCROLL REVEALS ================= */
html.reveal-ready :is(
  .service-card, .resource-card, .resource-item--listing, .work-steps__item,
  .contact-card, .link-list li, .openings__item, .branch-list li,
  .prose .facts__row, .contact-info .facts__row, .accordion, .cta-band__inner,
  .prose > h2, .prose > h3, .prose > p, .prose > ul, .prose > ol,
  .article .article__body > *, .kc-search, .category-list,
  .site-footer__brand, .site-footer__col, [data-anim='up']
) { translate: 0 18px; }

html.reveal-ready :is(
  .section__header, .kc__head, .work-steps__heading, [data-anim='down']
) { translate: 0 -14px; }

html.reveal-ready :is(
  .intro > :first-child, .approach-layout > :first-child,
  .contact-layout-home > :first-child, .contact-layout > :first-child,
  .profile:nth-child(odd), .principles__row:nth-child(odd), [data-anim='left']
) { translate: -28px 0; }

html.reveal-ready :is(
  .intro > :last-child, .contact-layout > :last-child, .content-layout > .sidebar,
  .profile:nth-child(even), .principles__row:nth-child(even), [data-anim='right']
) { translate: 28px 0; }

html.reveal-ready :is(.gallery-item, .team-member, [data-anim='zoom']) { scale: 0.96; }

/* Phones: items fade up instead of sliding in from the sides */
@media (max-width: 55.99rem) {
  html.reveal-ready :is(
    .intro > :first-child, .approach-layout > :first-child,
    .contact-layout-home > :first-child, .contact-layout > :first-child,
    .profile:nth-child(odd), .principles__row:nth-child(odd), [data-anim='left'],
    .intro > :last-child, .contact-layout > :last-child, .content-layout > .sidebar,
    .profile:nth-child(even), .principles__row:nth-child(even), [data-anim='right']
  ) { translate: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after, .btn--light::after { display: none; }
  .accordion::details-content { transition: none; }
}
/* =====================================================================
   8. RESPONSIVE: phones, tablets, landscape phones, big screens, printing
   ===================================================================== */

/* Long words, e-mail addresses and web addresses can never push the page wider than the screen */
.content-layout > *, .admin-layout > *, .contact-layout > *, .contact-layout-home > *,
.intro > *, .approach-layout > *, .hero__grid > *, .site-footer__grid > *,
.profile > *, .resource-item--listing > *, .form-row > *,
.services-grid > *, .resource-cards > *, .team-grid > *, .branch-list > *,
.gallery-grid > *, .work-steps > * { min-width: 0; }

.prose, .article__body, .facts dd, .profile__facts dd, .site-footer__contact,
.contact-card__value, .resource-item__title, .page-header h1, .page-header__intro { overflow-wrap: anywhere; }

/* Small phones: the name scales down a little more so it always fits next to the buttons */
@media (max-width: 29.99rem) {
  .wordmark { font-size: min(1.12rem, 5vw); }
}

/* Touch screens: bigger tap targets (about 44px) */
@media (pointer: coarse) {
  .category-list a, .filter-tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pagination__link { min-height: 2.75rem; }
  .sidebar__list a { display: flex; align-items: center; min-height: 2.75rem; }
  .site-footer__col a, .breadcrumbs a { display: inline-block; padding-block: 0.4rem; }
  .btn, .form-input { min-height: 3rem; }
  .accordion summary { min-height: 3rem; }
}

/* Phones turned sideways: the header scrolls away instead of using a quarter of the screen */
@media (orientation: landscape) and (max-height: 32rem) {
  .site-header { position: relative; }
  .hero { padding-block: 2rem; }
}

/* Big screens: everything scales up a little so the page does not look small and lost */
@media (min-width: 100rem) { html { font-size: 106.25%; } }
@media (min-width: 120rem) { html { font-size: 112.5%; } }
@media (min-width: 160rem) { html { font-size: 125%; } }

/* Printing (for example a Knowledge Center article) */
@media print {
  .site-header, .site-footer, .to-top, .scroll-progress, .cta-band, .skip-link, .hero-slider__controls { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .page-header { background: none; border-bottom: 1px solid #999999; color: #000000; }
  .page-header h1, .page-header__intro, .page-header .eyebrow, .page-header .breadcrumbs a,
  .page-header .breadcrumbs [aria-current='page'] { color: #000000; }
  .page-header::after { display: none; }
  a { color: #000000; text-decoration: underline; }
  *, *::before, *::after { animation: none !important; transition: none !important; opacity: 1 !important; translate: none !important; scale: none !important; }
}
/* =====================================================================
   9. LOGIN PAGE: password box with the Show / Hide button
   ===================================================================== */

/* The focus glow now wraps the whole box (input + button) instead of being cut off at the button */
.input-group { border-radius: var(--radius); transition: box-shadow var(--t-med) var(--ease-premium); }
.input-group__btn { transition: background-color var(--t-fast) var(--ease-soft); }

@supports selector(:has(*)) {
  .input-group .form-input:focus { outline: none; box-shadow: none; }
  .input-group:has(.form-input:focus) { outline: 2px solid var(--focus); box-shadow: 0 0 0 5px var(--ring); }
  .input-group:has(.form-input:focus) .input-group__btn { border-color: var(--focus); }
}

/* Keyboard users still see which button has focus */
.input-group__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }

/* Edge and Chrome on Windows add their own eye icon inside password boxes; hide it so only our button shows */
.input-group input::-ms-reveal,
.input-group input::-ms-clear { display: none; }

/* Saved-password autofill no longer flashes a different background colour */
#login-form .form-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 600000s ease-in-out 0s !important;
}
/* =====================================================================
   10. ASSIGNMENT LISTS, TABLES AND JUMP LINKS (Services pages)
   ===================================================================== */
.service-main { min-width: 0; }
.service-main > * + * { margin-top: 2.25rem; }

/* "Jump to" chips above the lists */
.jump-links {
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.jump-links__label {
  margin: 0 0 0.65rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.jump-links ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.jump-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft);
}
.jump-links a span {
  min-width: 1.8rem;
  padding: 0.1rem 0.5rem;
  background: var(--btn-bg);
  border-radius: 999px;
  font-size: 0.78rem;
  text-align: center;
  color: var(--btn-text);
  font-variant-numeric: tabular-nums;
}
.jump-links a:hover { background: var(--highlight); border-color: var(--accent); }

/* One list = one card */
.data-block {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.data-block::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--c-gold), transparent 65%); }
.data-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 1.5rem 1rem;
}
.data-block__title { margin: 0; font-size: 1.3rem; }
.data-block__note { margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--text-2); }
.data-block__count {
  padding: 0.25rem 0.85rem;
  background: var(--bg-tint);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--accent);
}
.data-block__empty { margin: 0; padding: 1.5rem; text-align: center; color: var(--text-2); }

/* Search box above long lists */
.table-tools { padding: 0.9rem 1.5rem; background: var(--bg-alt); border-block: 1px solid var(--border); }
.table-tools__input { max-width: 28rem; }
.table-tools__status { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--text-muted); }

/* The table */
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th {
  padding: 0.75rem 1rem;
  background: var(--bg-tint);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--accent);
}
.data-table td { padding: 0.7rem 1rem; border-top: 1px solid var(--border); vertical-align: top; }
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-alt) 75%, transparent); }
.data-table tbody tr:hover { background: var(--highlight); }
.data-table .col-num { width: 3.5rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.data-table--list td:nth-child(2),
.data-table--static td:first-child { font-weight: 600; color: var(--heading); }

.table-more { padding: 1rem; text-align: center; border-top: 1px solid var(--border); }

/* Phones: every row becomes a small card */
@media (max-width: 40rem) {
  .data-block__head { padding: 1.1rem 1.1rem 0.9rem; }
  .table-tools { padding: 0.8rem 1.1rem; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .data-table tr { padding: 0.85rem 1.1rem; border-top: 1px solid var(--border); }
  .data-table tbody tr:first-child { border-top: 0; }
  .data-table td { display: flex; gap: 0.75rem; padding: 0.15rem 0; border: 0; }
  .data-table td::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    padding-top: 0.25em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .data-table .col-num { display: none; }
  .data-table--list td:nth-child(2),
  .data-table--static td:first-child { display: block; margin-bottom: 0.2rem; font-size: 1.02rem; }
  .data-table--list td:nth-child(2)::before,
  .data-table--static td:first-child::before { display: none; }
}

/* Printing: show every row and hide the search tools */
@media print {
  .data-table tr[hidden] { display: table-row !important; }
  .table-tools, .table-more, .jump-links { display: none !important; }
  .data-block { box-shadow: none; break-inside: auto; }
}

/* Service cards: number of assignments listed */
.service-card__count { margin: -0.1rem 0 1rem; font-size: 0.85rem; font-weight: 700; color: var(--accent); }