/* Shared catalog tables and controls for laws and regulations. */
body:is([data-page-kind="home"], [data-page-kind="reglamentos"]) :is(#mley-home-laws, #mley-home-regulations) {
  margin-top: 1.25rem;
  border: 1px solid var(--result-border);
  border-radius: 24px;
  background: var(--bg-surface);
  box-shadow: 0 4px 16px rgba(22, 56, 62, .04);
}

:is(#mley-home-laws, #mley-home-regulations) > .card-body { padding: clamp(1.25rem, 3vw, 2.25rem); }
body:is([data-page-kind="home"], [data-page-kind="reglamentos"]) :is(#mley-home-laws, #mley-home-regulations):focus-visible { outline: 2px solid var(--result-accent); outline-offset: 3px; }
body:is([data-page-kind="home"], [data-page-kind="reglamentos"]) :is(#mley-home-catalog-heading, #mley-home-regulations-heading) { margin: 0 0 1.25rem; font-size: var(--text-heading); }

:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-summary { margin-top: .35rem; color: var(--result-muted); font-size: var(--text-caption); }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-input-shell i { color: var(--result-muted); }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-input-shell .form-control { color: var(--result-ink); font: var(--text-body)/var(--leading-ui) var(--result-font); }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-input-shell .form-control::placeholder { color: var(--result-muted); opacity: 1; }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-input-shell:focus-within { outline-color: var(--result-accent); }

:is(#mley-home-laws, #mley-home-regulations) .mley-home-pagination .page-link {
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid var(--result-border) !important;
  border-radius: 10px !important;
  background: var(--bg-surface);
  color: var(--result-accent);
  font: var(--weight-semibold) var(--text-caption)/var(--leading-ui) var(--result-font);
  box-shadow: none;
}
:is(#mley-home-laws, #mley-home-regulations) .mley-home-pagination .active .page-link {
  border-color: var(--result-accent) !important;
  background: var(--result-accent) !important;
  color: var(--bg-surface) !important;
}
:is(#mley-home-laws, #mley-home-regulations) .mley-home-pagination .disabled .page-link { color: var(--result-muted) !important; opacity: .6; }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-pagination-summary { color: var(--result-muted); font: var(--text-caption)/var(--leading-copy) var(--result-font); }

:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-empty { border-color: var(--result-border); background: var(--result-tint); color: var(--result-muted); }

/* A grouped directory. The same rows also arrive from the paginated pins API. */
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-toolbar {
  display: flex; flex-direction: column-reverse; align-items: stretch; gap: .65rem; margin-block-end: .5rem;
}
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-form { flex: none; gap: .5rem; }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-input-shell {
  flex: 1 1 8rem; min-width: 0; min-height: 46px; gap: 0; padding: 0 .15rem;
  border: 1px solid var(--result-border); border-radius: 12px; background: var(--bg-surface-2);
}
:is(#mley-home-laws, #mley-home-regulations) .mley-home-catalog-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
:is(#mley-home-laws, #mley-home-regulations) .catalog-field-action {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: 10px; background: transparent; color: var(--result-muted); cursor: pointer;
}
.mley-home-catalog-input-shell:has(input:placeholder-shown) .catalog-field-reset { visibility: hidden; }
.mley-home-catalog-input-shell input::-webkit-search-cancel-button { -webkit-appearance: none; }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-pagination { flex-wrap: wrap; }
:is(#mley-home-laws, #mley-home-regulations) .mley-home-pagination .page-link { min-width: 44px; }

:is(#mley-home-laws, #mley-home-regulations) .mley-home-laws-table:is(#mley-home-laws-table, #mley-home-regulations-table) {
  display: block; width: 100%; margin: 0; border: 1px solid var(--result-border); border-radius: 16px;
  border-spacing: 0; background: var(--bg-surface); overflow-anchor: none;
  container: catalog-directory / inline-size;
  & thead { display: table-header-group; position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  & thead th:first-child, & .mley-home-law-rank { display: none; }
  & tbody { display: block; padding-inline: clamp(.6rem, 2vw, 1.15rem); }
  & tbody tr {
    position: relative; display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) max(176px, 11.5rem);
    grid-template-areas: "name relation actions";
    align-items: start; gap: .25rem 1rem; margin: 0; padding: .75rem 0; scroll-margin-top: 85px;
    background: transparent; box-shadow: none; border: 0; border-radius: 0;
  }
  & tbody tr + tr { border-top: 1px solid var(--result-border); }
  & tbody tr:not(:last-child) td, & tbody tr td {
    min-width: 0; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent;
  }
  & td::before { display: none; }
  & .mley-home-law-name { grid-area: name; text-align: start; }
  & .mley-home-law-link {
    display: inline-flex; flex-direction: column; align-items: start; justify-content: center; gap: .1rem;
    max-width: 100%; min-height: 44px; padding: 0; vertical-align: middle;
    color: var(--result-ink); text-decoration: none;
  }
  & .catalog-document-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem; max-width: 100%; }
  & .mley-home-law-title {
    display: block; overflow: visible; overflow-wrap: anywhere; white-space: normal; -webkit-line-clamp: unset;
    color: inherit; font: var(--weight-semibold) var(--text-body)/var(--leading-ui) var(--result-font);
  }
  & .mley-home-law-key, & .mley-home-law-qualifier {
    display: block; margin: 0; padding: 0; background: transparent; color: var(--catalog-secondary-ink, var(--result-muted));
    font: var(--weight-regular) var(--text-caption)/var(--leading-ui) var(--result-font); overflow-wrap: anywhere;
  }
  & .catalog-relation, & .mley-home-law-metadata {
    color: var(--result-muted); font: var(--text-caption)/var(--leading-ui) var(--result-font); text-align: start;
  }
  & .mley-catalog-row-relation { grid-area: relation; }
  & .catalog-relation { display: flex; align-items: center; align-content: center; min-height: 44px; flex-wrap: wrap; gap: 0 .35rem; }
  & .mley-home-law-metadata { margin: 0; text-align: end; white-space: normal; }
  & .catalog-dof-date { font-size: .75rem; }
  & .catalog-dof-date a {
    display: inline-flex; align-items: center; gap: .2em; min-height: 24px;
    color: inherit; text-decoration: none;
  }
  & .mley-home-law-regulation-tag {
    display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: start; gap: .25rem; min-height: 28px;
    padding: .2rem 0; border: 0; color: var(--result-ink); background: transparent;
    box-shadow: none; text-decoration: none;
    white-space: normal; overflow-wrap: anywhere; text-align: start;
  }
  & .mley-home-law-actions {
    grid-area: actions; display: grid; justify-items: end; align-content: start;
  }
  & .mley-home-law-actions-group, & .mley-home-law-secondary-actions { display: inline-flex; align-items: center; gap: 0; }
  & .mley-home-law-secondary-actions:not(:has(a)) { display: none; }
  & .mley-home-law-action {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px;
    padding: 0 !important; border: 0; border-radius: 10px !important; background: transparent;
    color: var(--result-muted); box-shadow: none;
  }
  & .mley-catalog-pin[hidden] { display: none !important; }
  & .mley-catalog-pin[aria-pressed="true"] { color: var(--brand-text); }
  & .mley-catalog-pin[aria-pressed="true"] svg { fill: currentColor; transform: rotate(-20deg); }
  & :is(.mley-home-law-link, .mley-home-law-regulation-tag, .mley-home-law-action, .catalog-dof-date a) {
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    @media (prefers-reduced-motion: no-preference) { transition: color 120ms ease-out; }
    &:is(:active, :focus-visible) { color: var(--accent-color); --catalog-secondary-ink: currentColor; }
    &:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
    @media (hover: hover) and (pointer: fine) {
      &:hover { color: var(--accent-color); --catalog-secondary-ink: currentColor; }
    }
  }
  & .catalog-group { display: none; color: var(--result-muted); font-size: var(--text-small); margin: 0 0 .5rem; }
  & tr.mley-catalog-pinned:first-child .catalog-group--pinned,
  & tr.mley-catalog-pinned + tr:not(.mley-catalog-pinned) .catalog-group--ranked { display: block; }
}
@media (hover: hover) and (pointer: fine) {
  :is(#mley-home-laws, #mley-home-regulations) :is(.catalog-field-action, a.page-link):hover {
    color: var(--accent-color); text-decoration: none;
  }
}
/* With less room, the relation follows its document and the tools stay together. */
@container catalog-directory (max-width: 40rem) {
  :is(#mley-home-laws, #mley-home-regulations) .mley-home-laws-table:is(#mley-home-laws-table, #mley-home-regulations-table) {
    & tbody tr {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "name actions" "relation relation";
      gap: .15rem .5rem; padding-block: .5rem;
    }
    & .mley-catalog-row-relation:not(:has(.catalog-relation)) { display: none; }
    & .catalog-relation { min-height: 0; }
    & .mley-home-law-regulation-tag { min-height: 44px; }
  }
}
.mley-catalog-pin-status { color: var(--result-accent); margin: .5rem 1rem; }
.mley-catalog-pin-status button { min-height: 44px; color: inherit; border: 1px solid var(--result-border); background: var(--bg-surface); border-radius: 8px; padding: .5rem; }