/*
 * The public citizen charter table. Plain committed CSS, no build step: the
 * seven-column table on wide screens, one card per service on phones, and a
 * print layout. Theme colours come from the compiled stylesheet's variables.
 */

/*
 * One colour for the small field labels the public charter prints beside its
 * values: the card labels on a phone, and the service page's rail. A muted
 * slate - a label should stay quiet next to its value, so this is not the
 * theme's primary (that also resolves to #2b7fff, 3.8:1 on white, which fails
 * WCAG AA at label size). Cooler and darker than the neutral grey it replaces,
 * which sat at 4.8:1; this is 7.6:1. The theme boot puts a "dark" class on
 * <html>, which is what the override hangs off.
 */
:root { --charter-label: #475569; }
.dark { --charter-label: #94a3b8; }

/*
 * The service name on a phone. Each card runs on for a screen or more now
 * that nothing is clamped, so the name has to say "a new service starts
 * here" on its own. A deep blue: it also happens to be true, since the name
 * is the link to the service's page. Not the theme's primary, which is
 * #2b7fff and 3.8:1 on white - too little contrast for text this size.
 */
:root { --charter-name: #1d4ed8; }
.dark { --charter-name: #93c5fd; }

/*
 * The edge of a phone card. The theme's border is a hairline grey, which is
 * right between the rows of a table and far too quiet around a card that runs
 * on past a screen: the eye needs to see where one service ends. A tint of
 * the same blue as the name it encloses.
 */
:root { --charter-card-edge: #93c5fd; }
.dark { --charter-card-edge: #1e40af; }

.charter-section { margin-bottom: 2rem; }
.charter-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.charter-wing { margin-bottom: 1.25rem; }
.charter-table-wrap { overflow-x: auto; }

.charter-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.6;
}
.charter-table th,
.charter-table td {
  border: 1px solid var(--color-border, #e5e7eb);
  padding: 0.5rem 0.625rem;
  vertical-align: top;
  text-align: start;
}
.charter-table thead th {
  background: var(--color-accent, #f4f5f7);
  font-weight: 600;
  font-size: 0.8125rem;
}
.charter-table .charter-group th {
  background: var(--color-muted, #f8f9fb);
  font-weight: 600;
  color: var(--color-secondary-foreground, #4b5563);
}
/*
 * The seven minimums have to add up to less than the shell's content column,
 * which is a fixed 1220px at every viewport past 1280px (kt-container-fixed
 * caps at 1280 with 30px of padding). Only when the table fits can the
 * wrapper stop scrolling sideways, and only then can the heading row stick.
 * The two short columns give up the width; the dense text columns keep it.
 */
.charter-table .col-serial { width: 3.5rem; text-align: center; }
.charter-table .col-name { min-width: 14rem; }
.charter-table .col-method { min-width: 14rem; }
.charter-table .col-docs { min-width: 16rem; }
.charter-table .col-fee { min-width: 6.5rem; }
.charter-table .col-time { min-width: 6.5rem; }
.charter-table .col-officer { min-width: 14rem; }
.charter-service-name { font-weight: 600; }

/* Rich text saved by the editor: the compiled stylesheet resets lists. */
.charter-html p { margin: 0 0 0.375rem; }
.charter-html p:last-child { margin-bottom: 0; }
.charter-html ol, .charter-html ul { margin: 0.25rem 0 0.375rem; padding-inline-start: 1.25rem; }
/* The charter is published in Bangla, so a numbered list counts in Bangla
   too. `bengali` is a predefined CSS counter style; a browser that does not
   know it falls back to decimal on its own. */
.charter-html ol { list-style: bengali; }
.charter-html ul { list-style: disc; }
.charter-html h2, .charter-html h3, .charter-html h4,
.charter-html h5, .charter-html h6 { font-weight: 600; margin: 0.75rem 0 0.25rem; line-height: 1.5; }
.charter-html h2 { font-size: 1.0625rem; }
.charter-html h3 { font-size: 1rem; }
.charter-html h4 { font-size: 0.9375rem; }
.charter-html h5, .charter-html h6 { font-size: 0.875rem; }
.charter-html h2:first-child, .charter-html h3:first-child, .charter-html h4:first-child { margin-top: 0; }
.charter-html blockquote {
  margin: 0.625rem 0;
  padding: 0.125rem 0 0.125rem 0.875rem;
  border-inline-start: 3px solid var(--color-border, #e5e7eb);
  color: var(--color-secondary-foreground, #4b5563);
}
.charter-html hr {
  margin: 0.875rem 0;
  border: 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.charter-html s { text-decoration: line-through; }
.charter-html table { border-collapse: collapse; margin: 0.375rem 0; }
.charter-html th, .charter-html td { border: 1px solid var(--color-border, #e5e7eb); padding: 0.125rem 0.375rem; }
.charter-html a { text-decoration: underline; }
/* A pasted URL is one unbreakable word, and once the wrapper stops scrolling
   sideways an unbroken cell would push the whole page instead. */
.charter-html { overflow-wrap: break-word; }

.charter-forms { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.charter-forms li { display: flex; align-items: baseline; gap: 0.375rem; }

.charter-officer + .charter-officer {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}
.charter-officer-name { font-weight: 600; }
.charter-officer-title { color: var(--color-secondary-foreground, #4b5563); }

/* ------------------------------------------------------------------------
 * The paged public page (templates/charter/index.html): letterhead, filter
 * bar, suggestion list, group headings inside the one table, search marks
 * and the "Read more" clamp. Plain CSS on the theme's variables; none of it
 * needs a Tailwind rebuild.
 * ---------------------------------------------------------------------- */

.charter-page { max-width: 80rem; margin: 0 auto; }

.charter-letterhead { text-align: center; margin: 0.5rem 0 1.5rem; }
.charter-emblem { display: block; height: 5rem; width: auto; margin: 0 auto 0.75rem; }
.charter-letterhead-line {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-secondary-foreground, #4b5563);
}
.charter-letterhead-org { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.charter-title { font-size: 1.25rem; font-weight: 700; margin: 0.75rem 0 0; }

.charter-h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.625rem; }
.charter-front { margin-bottom: 1.25rem; font-size: 0.9375rem; line-height: 1.7; }
.charter-front p { margin: 0 0 0.25rem; }

/*
 * Filter bar. It is not pinned at any width: pinned together with the table's
 * heading row it ate a third of a laptop screen. It scrolls away with the
 * letterhead, and the floating button below brings it back over the page as a
 * panel. With no JavaScript there is no button and no panel - the bar is
 * still at the top of the page, which is where it always was.
 */
.charter-filters { margin-bottom: 1.25rem; }

/* The close button belongs to the open panel; everywhere else it is absent. */
.charter-filters-close { display: none; }

/*
 * The floating search button. Hidden until the bar has scrolled out of view,
 * which the is-past class on the bar reports - the button is a later sibling
 * of it, so no state has to travel any further than that.
 */
.charter-fab { display: none; }
.charter-filters.is-past ~ .charter-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 38;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 9999px;
  /* A surface, not an accent: it sits on the theme's own card colour, so it
     follows light and dark without a second rule. The border and the shadow
     are what lift it off a page of the same colour. */
  background: var(--color-card, #fff);
  color: var(--color-secondary-foreground, #18181b);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.16);
  cursor: pointer;
}
.charter-filters.is-past ~ .charter-fab:hover { background: var(--color-accent, #f4f5f7); }
/* While the panel is open the button has nothing left to do. */
.charter-filters.is-open ~ .charter-fab { display: none; }

/* The bar, brought back over the page: a sheet from the top on a phone. */
.charter-filters.is-open {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  margin: 0;
  border-radius: 0 0 0.875rem 0.875rem;
  box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);
}
.charter-filters.is-open > .kt-card-content { padding-block: 0.875rem; }
.charter-filters.is-open .charter-filters-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-end: 0.375rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--color-muted-foreground, #6b7280);
  cursor: pointer;
}
.charter-filters.is-open .charter-filter-form { padding-block-start: 1.25rem; }

/* From a tablet up, a centred card just under the site header. */
@media (min-width: 768px) {
  .charter-filters.is-open {
    inset-block-start: calc(var(--header-height, 60px) + 0.75rem);
    margin-inline: auto;
    width: min(64rem, calc(100% - 2rem));
    border-radius: 0.875rem;
  }
}

.charter-scrim {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgb(0 0 0 / 0.45);
}
.charter-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.charter-filter-field { flex: 0 1 15rem; min-width: 12rem; }
.charter-search { position: relative; flex: 1 1 16rem; min-width: 0; }
.charter-search-icon {
  position: absolute;
  inset-inline-start: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-muted-foreground, #6b7280);
  pointer-events: none;
}
.charter-search-input { width: 100%; padding-inline-start: 2.25rem; padding-inline-end: 2.25rem; }
.charter-search-input::-webkit-search-cancel-button { display: none; }
.charter-clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  padding: 0.25rem;
  background: none;
  border: 0;
  color: var(--color-muted-foreground, #6b7280);
  cursor: pointer;
}
.charter-clear:hover { color: var(--color-foreground, #111827); }

/* Suggestions under the search box */
.charter-suggest {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  z-index: 50;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--color-background, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.charter-suggest a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.5;
}
.charter-suggest a:hover, .charter-suggest a.is-active { background: var(--color-accent, #f4f5f7); }
.charter-suggest small { display: block; font-size: 0.75rem; color: var(--color-muted-foreground, #6b7280); }

mark.charter-hl { background: #fde68a; color: inherit; padding: 0 0.125rem; border-radius: 0.125rem; }
[data-kt-theme-mode="dark"] mark.charter-hl, .dark mark.charter-hl { background: #a16207; }

/* Group headings inside the one public table */
.charter-table .charter-section-row th {
  background: var(--color-accent, #f4f5f7);
  font-weight: 700;
  font-size: 0.9375rem;
}
.charter-table .charter-wing-row th {
  background: color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent);
  color: var(--color-primary, #2563eb);
  font-weight: 700;
  text-align: center;
}
.charter-table .charter-branch-row th {
  background: var(--color-muted, #f8f9fb);
  color: var(--color-secondary-foreground, #4b5563);
  font-weight: 600;
  padding-inline-start: 1.5rem;
}

/* The service type, on its own line under the name. Muted on purpose: it
   labels the row, it does not compete with it. The name is a block so the
   badge always starts a new line, however short the name is. */
.charter-service-name { display: block; }
.charter-type-badge {
  margin-top: 0.3125rem;
  font-weight: 500;
  color: var(--charter-label, #475569);
}
.charter-continued { font-weight: 400; color: var(--color-muted-foreground, #6b7280); }
.charter-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem; }

/* "Read more": the script clamps a long cell and unclamps one that fits.
   Ten lines - em here is the cell's own font size and a line is 1.7 of it, so
   the fade falls between lines rather than through one. Most cells say what
   they have to say inside that, and the ones that do not are the ones worth
   opening. (A phone clamps nothing at all; see the mobile block.) */
[data-charter-clamp].charter-clamped { max-height: 17em; overflow: hidden; position: relative; cursor: pointer; }
[data-charter-clamp].charter-clamped::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--color-card, var(--color-background, #fff)));
  pointer-events: none;
}
.charter-more {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--color-primary, #2563eb);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------------------
 * Sticky heading row, wide screens only. It is the one thing pinned under the
 * site header; the filter bar scrolls away (see the floating button above).
 *
 * The wrapper's `overflow-x: auto` makes the CSS engine compute `overflow-y`
 * to `auto` as well, which turns the wrapper into the scroll container: a
 * sticky heading row would then stick to the wrapper's own top edge, which
 * never moves, instead of to the page. So the sticky rules live behind the
 * width where the table fits and the wrapper can stop scrolling entirely.
 *
 * Offset: the shell keeps the live header height in --header-height (100px
 * loose, 60px once the site header sticks).
 * ---------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .charter-table-wrap { overflow: visible; }

  .charter-table thead th {
    position: sticky;
    top: var(--header-height, 60px);
    z-index: 20;
  }
  /* A sticky cell paints its own background, so the border has to come with
     it - a collapsed border belongs to the table and scrolls away. */
  .charter-table thead th {
    box-shadow: inset 0 -1px 0 0 var(--color-border, #e5e7eb),
                inset 0 1px 0 0 var(--color-border, #e5e7eb);
  }
}

/* ------------------------------------------------------------------------
 * Phones: the table becomes one card per service. Same DOM, no duplicate
 * markup - each cell prints its own column heading from data-label.
 *
 * The seven cells are not equal on a small screen, so they are not laid out
 * the same. The serial and the name share the card's top line, the two short
 * facts sit on one line each with the label opposite the value, and only the
 * long columns keep a heading above their text. The grid also lifts the fee
 * up next to the time, where a reader expects it, without touching the
 * source order - the focusable things (the name, the form links, the
 * officer's phone and email) stay in the order they are written.
 * ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .charter-table thead { display: none; }
  .charter-table, .charter-table tbody { display: block; width: auto; }

  /* The list is a stack of cards, so the box around the whole stack goes. */
  .charter-card { border: 0; background: transparent; box-shadow: none; }
  .charter-card > .kt-card-content { padding: 0; }
  .charter-card-footer { padding-inline: 0; }

  /* Headings read as headings, not as cards. */
  .charter-table tbody tr.charter-group,
  .charter-table tbody tr.charter-section-row,
  .charter-table tbody tr.charter-wing-row,
  .charter-table tbody tr.charter-branch-row {
    display: block;
    border: 0;
    margin: 1.75rem 0 0.75rem;
  }
  .charter-table tbody tr.charter-group th,
  .charter-table tbody tr.charter-section-row th,
  .charter-table tbody tr.charter-wing-row th,
  .charter-table tbody tr.charter-branch-row th {
    display: block;
    border: 0;
    text-align: start;
    padding: 0.25rem 0;
    border-radius: 0;
    background: transparent;
  }
  .charter-table tbody tr.charter-wing-row th {
    font-size: 1rem;
    border-bottom: 2px solid var(--color-primary, #2563eb);
    padding-bottom: 0.375rem;
  }
  .charter-table tbody tr.charter-branch-row th { font-size: 0.9375rem; padding-inline-start: 0; }

  /* One service, one card. */
  .charter-table tbody tr.charter-service-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.625rem;
    border: 1px solid var(--charter-card-edge, #93c5fd);
    border-radius: 0.625rem;
    background: var(--color-card, var(--color-background, #fff));
    /* A card runs on for a screen or more now that nothing is clamped, so the
       gap between two of them has to be wide enough to read as a break. */
    margin: 0 0 1.5rem;
    overflow: hidden;
  }
  .charter-table .charter-service-row > td {
    display: block;
    grid-column: 1 / -1;
    border: 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
    padding: 0.625rem 0.75rem;
    text-align: start;
  }
  .charter-table .charter-service-row > td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--charter-label, #475569);
    margin-bottom: 0.1875rem;
  }

  /* Top line: the serial as a marker, the name as the card's title. */
  .charter-table .charter-service-row > .col-serial {
    grid-column: 1;
    grid-row: 1;
    border-top: 0;
    padding-inline-end: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-muted-foreground, #6b7280);
  }
  .charter-table .charter-service-row > .col-name {
    grid-column: 2;
    grid-row: 1;
    border-top: 0;
    padding-inline-start: 0;
  }
  .charter-table .charter-service-row > .col-serial::before,
  .charter-table .charter-service-row > .col-name::before { content: none; }
  .charter-table .charter-service-row .charter-service-name {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5;
  }

  /* The two short facts, label opposite value, one line each. */
  .charter-table .charter-service-row > .col-time { grid-row: 2; }
  .charter-table .charter-service-row > .col-fee { grid-row: 3; }
  .charter-table .charter-service-row > .col-time,
  .charter-table .charter-service-row > .col-fee {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
  }
  .charter-table .charter-service-row > .col-time::before,
  .charter-table .charter-service-row > .col-fee::before { margin: 0; flex-shrink: 0; }

  /* The long columns keep their heading above the text. */
  .charter-table .charter-service-row > .col-method { grid-row: 4; }
  .charter-table .charter-service-row > .col-docs { grid-row: 5; }
  .charter-table .charter-service-row > .col-officer { grid-row: 6; }
  .charter-table .charter-service-row > .col-officer { background: var(--color-muted, #f8f9fb); }

  /*
   * Type and spacing, not less content. Bengali carries its vowel signs above
   * and below the line, so it needs more leading than Latin before it reads
   * as prose rather than as a block - and a phone column is narrow enough
   * that every one of these matters more than it does on a desktop.
   */
  .charter-table .charter-service-row > td { padding: 0.75rem 0.875rem; }
  .charter-table .charter-service-row .charter-service-name {
    color: var(--charter-name, #1d4ed8);
    line-height: 1.65;
  }
  .charter-table .charter-service-row .charter-html {
    font-size: 0.9375rem;
    line-height: 1.85;
  }
  .charter-table .charter-service-row .charter-html p { margin-bottom: 0.625rem; }
  .charter-table .charter-service-row .charter-html li { margin-bottom: 0.375rem; }
  .charter-table .charter-service-row .charter-html ol,
  .charter-table .charter-service-row .charter-html ul { padding-inline-start: 1.5rem; }
  .charter-table .charter-service-row > .col-officer { line-height: 1.9; }
  /*
   * No clamp on a phone. Scrolling costs a thumb flick, where "Read more"
   * costs a tap, a reflow and losing your place - so the text simply runs on.
   * The script measures after the stylesheet, finds nothing overflowing, and
   * takes its own class and button back off.
   */
  [data-charter-clamp].charter-clamped {
    max-height: none;
    overflow: visible;
    cursor: auto;
  }
  [data-charter-clamp].charter-clamped::after { display: none; }
  .charter-more { display: none; }

  .charter-filter-field { flex-basis: 100%; min-width: 0; }
  .charter-emblem { height: 4rem; }
  .charter-title { font-size: 1.125rem; }
}

@media print {
  header, footer, .no-print { display: none !important; }
  .charter-table { font-size: 11px; }
  .charter-table th, .charter-table td { padding: 3px 5px; }
  .charter-wing { break-inside: avoid; box-shadow: none; }
  /* The letterhead is a <header> too; it is the one header print keeps. */
  header.charter-letterhead { display: block !important; }
  .charter-filters, .charter-suggest, .charter-more, .charter-fab { display: none !important; }
  [data-charter-clamp].charter-clamped { max-height: none; overflow: visible; }
  [data-charter-clamp].charter-clamped::after { display: none; }
  .charter-section-row, .charter-wing-row, .charter-branch-row { break-after: avoid; }
}

/* An official e-mail address is one unbreakable word; let it wrap in the cell. */
.charter-table .col-officer { overflow-wrap: anywhere; }


/* ------------------------------------------------------------------------
 * One service's own page (templates/charter/service_detail.html): the prose
 * on the left, the reference rail on the right. Below lg the rail drops under
 * the document, commitment first, because that is what a phone reader wants
 * before the long text.
 * ---------------------------------------------------------------------- */

.charter-detail { max-width: 72rem; margin: 0 auto; }

.charter-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground, #6b7280);
  margin-bottom: 0.625rem;
}

.charter-detail-head {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.charter-detail-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.charter-detail-serial { font-size: 0.75rem; color: var(--color-muted-foreground, #6b7280); }
.charter-detail-title { font-size: 1.5rem; font-weight: 700; line-height: 1.45; margin: 0; }

.charter-detail-grid { display: grid; gap: 1.5rem; align-items: start; }

/* The contents menu is the first child, so it only needs a column to appear in. */
.charter-toc { display: none; }

/*
 * The rail comes before the document in the source, for the phone. From lg up
 * every column is placed explicitly, so that costs the wide layout nothing.
 */
@media (min-width: 1024px) {
  .charter-detail-grid { grid-template-columns: minmax(0, 1fr) 19rem; }
  .charter-detail-main { grid-column: 1; grid-row: 1; }
  .charter-detail-rail { grid-column: 2; grid-row: 1; }
  /* Both side columns are short; keeping them in view is the point. */
  .charter-detail-rail { position: sticky; top: calc(var(--header-height, 60px) + 1rem); }
}
@media (min-width: 1280px) {
  .charter-detail-grid { grid-template-columns: 13rem minmax(0, 1fr) 19rem; }
  .charter-toc { grid-column: 1; grid-row: 1; }
  .charter-detail-main { grid-column: 2; grid-row: 1; }
  .charter-detail-rail { grid-column: 3; grid-row: 1; }
  .charter-toc {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--header-height, 60px) + 1rem);
    /* The rule the dots sit on, as in Metronic's settings-sidebar demo. */
    border-inline-start: 1px solid var(--color-border, #e5e7eb);
  }
}

.charter-toc a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  margin-inline-start: -1px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-secondary-foreground, #4b5563);
  text-decoration: none;
  border-radius: 0.5rem;
}
.charter-toc a:hover { color: var(--color-primary, #2563eb); }
/* KTScrollspy toggles exactly this class and nothing else. */
.charter-toc a.active {
  color: var(--color-primary, #2563eb);
  font-weight: 600;
  background: var(--color-accent, #f4f5f7);
}
.charter-toc-dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--color-border, #e5e7eb);
  margin-inline-start: -0.8125rem;
}
.charter-toc a.active .charter-toc-dot { background: var(--color-primary, #2563eb); }

/* A jump must not land the heading under the sticky site header. */
.charter-detail-section { scroll-margin-top: calc(var(--header-height, 60px) + 1.5rem); }

/*
 * A scrollspy can only mark a section the reader can actually scroll to the
 * top of, and the last one is usually shorter than the viewport. This is the
 * room that lets it get there; only needed where the menu is shown.
 */
@media (min-width: 1280px) {
  .charter-detail-main { padding-bottom: 50vh; }
}

.charter-detail-main { min-width: 0; }
.charter-detail-section { margin-bottom: 1.75rem; }
.charter-detail-section:last-of-type { margin-bottom: 0; }
.charter-detail-h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.charter-detail-main .charter-html { font-size: 0.9375rem; line-height: 1.8; }

.charter-detail-rail { display: flex; flex-direction: column; gap: 1rem; }
.charter-detail-rail .kt-card-header { min-height: 0; padding-top: 0.875rem; padding-bottom: 0.875rem; }
.charter-detail-rail .kt-card-title { font-size: 0.9375rem; }

/* Label above value: a 20rem rail has no room for two columns. */
.charter-meta { margin: 0; }
.charter-meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charter-label, #475569);
}
.charter-meta dd {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
}
.charter-meta dt + dd + dt { margin-top: 0.875rem; }

.charter-rail-officers { font-size: 0.8125rem; line-height: 1.7; }
.charter-rail-files { display: flex; flex-direction: column; gap: 0.375rem; }
.charter-rail-h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--charter-label, #475569);
  margin: 0.375rem 0 0;
}
.charter-rail-h3:first-child { margin-top: 0; }

.charter-files { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.charter-files li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.875rem; line-height: 1.6; }
.charter-files a { overflow-wrap: anywhere; }

/* Each FAQ collapses on its own: <details> works with no JavaScript. */
.charter-disclosure {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.5rem;
}
.charter-disclosure > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.charter-disclosure[open] > summary { margin-bottom: 0.5rem; }
.charter-answer { margin: 0; font-size: 0.875rem; line-height: 1.7; }

.charter-detail-back { margin: 1.75rem 0 0; font-size: 0.875rem; }

@media (max-width: 767px) {
  /* Down here, not in the table's mobile block above: these rules are
     overrides of the service-page rules that follow it. */
  .charter-detail-title { font-size: 1.25rem; }
  .charter-detail-rail .kt-card-header { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .charter-detail-section { margin-bottom: 1.25rem; }
}

@media print {
  .charter-crumbs, .charter-detail-back { display: none !important; }
  .charter-detail-grid { display: block; }
  .charter-detail-rail { position: static; margin-top: 1rem; }
  .charter-disclosure > summary { list-style: none; }
  /* Printing must not hide an answer just because it was closed on screen. */
  .charter-disclosure > *:not(summary) { display: revert !important; }
}

/* The service name is the way into a service's own page. Underlined only on
   hover: 50 underlined rows would read as noise. */
a.charter-service-name { color: inherit; text-decoration: none; }
a.charter-service-name:hover { color: var(--color-primary, #2563eb); text-decoration: underline; }

/* ------------------------------------------------------------------------
 * Sections 3 to 5, below the table: what the directorate expects of an
 * applicant, how to complain, and where the subordinate offices publish.
 * ---------------------------------------------------------------------- */

.charter-front-section { margin-top: 2rem; }
.charter-grs-intro { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.8; }
.charter-grs-table .col-grs-when { min-width: 12rem; }
.charter-grs-table .col-grs-whom { min-width: 12rem; }
.charter-grs-table .col-grs-address { min-width: 16rem; }
.charter-grs-table .col-grs-time { min-width: 8rem; }
.charter-office-links li { margin-bottom: 0.375rem; }