/* One equal-cell module grid and one compact, horizontally scrollable
   favourite bar. Clinical catalogues retain their own layout. */
@media screen {
  html[data-theme] #main .home-access-grid.home-module-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-auto-rows: 1fr;
    gap: 9px;
    align-items: stretch;
  }
  html[data-theme] #main .home-access-grid.home-module-grid > a.si-card,
  html[data-theme] #main .home-access-grid.home-module-grid > a.si-card.home-primary {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 98px;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    border-radius: 8px;
    text-align: center;
  }
  html[data-theme] #main .home-access-grid.home-module-grid a.si-card .si-icon {
    --home-icon-size: 32px;
    --home-glyph-size: 22px;
    align-self: center;
    justify-self: center;
    border-radius: 7px;
  }
  html[data-theme] #main .home-access-grid.home-module-grid a.si-card > div {
    flex: none;
    width: 100%;
    min-width: 0;
  }
  html[data-theme] #main .home-access-grid.home-module-grid a.si-card :is(h2,h3) {
    margin: 0;
    font-size: 15px !important;
    line-height: 1.35;
    color: var(--ink);
    overflow-wrap: break-word;
  }
  html[data-theme] #main .home-access-grid.home-module-grid a.si-card :is(p,.si-arrow) { display: none; }
  html[data-theme] #main .home-modules { margin-top: 18px; }
  html[data-theme] #main .home-modules > h2 { margin-bottom: 9px; }

  /* The glyph shrinks; its invisible touch area remains usable. */
  html[data-theme] #main .favorite-toggle {
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 0;
    border-radius: 7px;
  }
  html[data-theme] #main .favorite-toggle > svg {
    display: block;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    margin: 0;
    flex: none;
  }
  html[data-theme] #main #overview-content .overview-section {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 12px 0 0;
    padding: 6px 0;
  }
  html[data-theme] #main #overview-content .overview-section > h2 {
    flex: none;
    margin: 0;
    font-size: 13px;
    letter-spacing: .025em;
    color: var(--muted);
  }
  html[data-theme] #main #overview-content .overview-section > h2::after { display: none; }
  html[data-theme] #main #overview-content .cards {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: 3px;
  }
  html[data-theme] #main #overview-content .cards:focus-visible {
    outline: 2px solid var(--read-teal);
    outline-offset: 3px;
    border-radius: 8px;
  }
  html[data-theme] #main #overview-content .cards > :is(.tool-card,.resource-favorite) {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    max-width: 260px;
    border-radius: 7px;
    touch-action: pan-x pan-y;
  }
  html[data-theme] #main #overview-content .cards > .favorite-dragging { touch-action: none; }
  html[data-theme] #main #overview-content .cards :is(.card,.si-card) {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    min-height: 44px;
    padding: 8px 38px 8px 36px;
    border-radius: 7px;
    box-sizing: border-box;
  }
  html[data-theme] #main #overview-content .cards :is(h2,h3) {
    font-size: 13px !important;
    line-height: 1.3;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-theme] #main #overview-content .cards :is(.pill,p,.card-end,.si-arrow) { display: none; }
  html[data-theme] #main #overview-content .cards :is(.card-top,.si-icon) {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  html[data-theme] #main #overview-content .cards :is(.icon,.si-icon) { width: 20px; height: 20px; min-width: 20px; flex-basis: 20px; border-radius: 5px; }
  html[data-theme] #main #overview-content .cards :is(.icon,.si-icon) > svg { width: 15px; height: 15px; }
  html[data-theme] #main #overview-content .favorite-toggle {
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    width: 30px;
    height: 36px;
    border: 0;
    background: transparent;
  }
  html[data-theme] #main #overview-content .overview-empty {
    flex: 1;
    padding: 8px 10px;
    font-size: 13px !important;
    border: 0;
    background: transparent;
  }
  html[data-theme] #main #overview-content .cards > :is(.tool-card,.resource-favorite):hover { transform: none; }
  @container consultation (min-width: 800px) {
    html[data-theme] #main .home-access-grid.home-module-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  }
  @container consultation (max-width: 599px) {
    html[data-theme] #main .home-access-grid.home-module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    html[data-theme] #main #overview-content .overview-section { flex-wrap: wrap; gap: 5px; }
    html[data-theme] #main #overview-content .overview-section > h2 { width: 100%; }
    html[data-theme] #main #overview-content .cards { flex-basis: 100%; }
    html[data-theme] #main #overview-content .cards > :is(.tool-card,.resource-favorite) {
      flex-basis: 44%;
      min-width: 140px;
      max-width: 210px;
    }
    html[data-theme] #main #overview-content .overview-empty { padding: 5px 0; }
  }
  @media (max-width: 700px) {
    html[data-theme] #main .home-access-grid.home-module-grid { gap: 7px; }
    html[data-theme] #main .home-access-grid.home-module-grid a.si-card { padding: 10px 8px; min-height: 90px; gap: 8px; }
    html[data-theme] #main .home-access-grid.home-module-grid a.si-card :is(h2,h3) { font-size: 13px !important; }
    html[data-theme] #main #overview-content .overview-section { gap: 7px; }
    html[data-theme] #main #overview-content .overview-section > h2 { font-size: 12px; }
    html[data-theme] #main #overview-content .cards :is(.card,.si-card) { padding-right: 46px; }
    html[data-theme] #main #overview-content .favorite-toggle { width: 44px; height: 44px; right: 0; }
  }
}
@media screen {
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card:not(.home-primary) .si-icon {
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 8%, var(--surface));
    border-color: var(--line);
    box-shadow: none;
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card:not(.home-primary) svg { color: inherit; }
  html[data-theme] #main .home-access-grid.home-module-grid.home-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 1050px) {
    html[data-theme] #main .home-access-grid.home-module-grid.home-highlight-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  html[data-theme] #main .home-highlights + .home-modules {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary {
    --featured-accent: #39847a;
    background: linear-gradient(145deg,
      color-mix(in srgb, var(--featured-accent) 13%, var(--surface)),
      color-mix(in srgb, var(--featured-accent) 6%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--featured-accent) 40%, var(--line));
    box-shadow: var(--glass-shadow);
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary[data-highlight="doses"] {
    --featured-accent: #5b80ae;
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary[data-highlight="exercicios"] {
    --featured-accent: #a77a42;
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary[data-highlight="cardiovascular"] {
    --featured-accent: #a16b85;
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary :is(h2, h3) { color: var(--ink); }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary .si-icon {
    background: color-mix(in srgb, var(--featured-accent) 20%, var(--surface));
    border-color: color-mix(in srgb, var(--featured-accent) 25%, var(--line));
    box-shadow: none;
  }
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary svg {
    color: color-mix(in srgb, var(--featured-accent) 60%, var(--ink));
  }
}
@media screen and (hover: hover) and (pointer: fine) {
  html[data-theme] #main .home-access-grid.home-module-grid > .si-card.home-primary:hover {
    background: color-mix(in srgb, var(--featured-accent) 18%, var(--surface));
    border-color: color-mix(in srgb, var(--featured-accent) 65%, var(--line));
  }
}