/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* ===================================================================
   LAYOUT — page grid, column widths, typography scale.

   Owns: how much room text gets and how big it is.
   Does NOT own: colours (gemma.css), header/nav chrome (nav.css),
   components (components.css).

   The shape:

     sidebar 17rem │ ←auto→ │ content 56rem │ toc 17rem │ ←auto→

   The sidebar stays flush left while equal-width navigation rails keep
   the article centred in the viewport. Long measures are the main thing
   that makes documentation tiring to read; at the old 100rem the lines
   ran to ~180 characters.
   =================================================================== */

/* -------------------------------------------------------------------
   Root scale

   Material ships `html { font-size: 125% }`, which makes 1rem = 20px and
   every rem value in this file 25% larger than it reads. Anchoring to
   100% keeps the scale honest: 0.875rem is 14px, as intended.
   ------------------------------------------------------------------- */
html {
  font-size: 100%;
}

/* -------------------------------------------------------------------
   Grid
   ------------------------------------------------------------------- */
.md-grid {
  max-width: 100%;
}

.md-main__inner {
  margin-top: 0;
}

/* The sidebar stays flush left at every width. Equal-width navigation
   rails bookend the content, while auto margins absorb any extra space so
   the table of contents follows the text instead of hugging the viewport.

   Capping `.md-main__inner` instead would centre all three columns and
   push the sidebar inward, which is not what a docs rail should do. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 17rem;
  }

  .md-sidebar--secondary {
    /* Match the primary rail so the article itself, rather than the
       article-and-TOC pair, is centred in the viewport. */
    width: 17rem;
    margin-right: auto;   /* pairs with .md-content's margin-left */
    padding-left: var(--gemma-space-6);
  }

  /* Padding lives here, not on `__inner`: the breadcrumb is a *sibling*
     of `__inner`, so padding applied there left the two misaligned by
     77px. Constraining the shared parent keeps every child on one edge. */
  .md-content {
    max-width: 56rem;
    margin-left: auto;
    padding-inline: var(--gemma-space-6);
  }

  /* Pages with `hide: toc` still render the sidebar element, just hidden.
     Let the wider content occupy the regular content + TOC footprint. This
     preserves the regular page's left edge while using the freed rail. */
  .md-sidebar--secondary[hidden] ~ .md-content {
    max-width: 73rem;
    margin-inline: auto;
  }

  /* Material sets an asymmetric 1.2rem margin and its own max-width via
     `… .md-sidebar--primary:not([hidden]) ~ .md-content .md-content__inner`
     (0,4,0). A bare `.md-content__inner` rule is 0,1,0 and loses. */
  .md-content__inner,
  [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content .md-content__inner,
  [dir="ltr"] .md-sidebar--secondary:not([hidden]) ~ .md-content .md-content__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Material reserves 88px of right padding on the sidebar's inner
     wrapper, leaving the nav only 184px of a 272px rail — which is what
     wrapped "Image Understanding" onto two lines. */
  .md-sidebar--primary .md-sidebar__inner {
    padding-right: var(--gemma-space-2);
  }
}

/* The breadcrumb carries its own inset, which left it 19px off the heading
   it sits above. Both now start on the same edge. */
.md-content .md-path {
  margin-inline: 0;
  padding-inline: 0;
  font-size: 0.75rem;
}

/* -------------------------------------------------------------------
   Typography
   14px base, tighter leading than the previous 1.7. The old setting
   was airy vertically while cramped horizontally -- the opposite of
   what long-form reading wants.
   ------------------------------------------------------------------- */
.md-typeset {
  font-size: 0.875rem;
  line-height: 1.65;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  margin-bottom: var(--gemma-space-4);
}

.md-typeset li {
  margin-bottom: var(--gemma-space-1);
}

.md-typeset h1 {
  margin-bottom: var(--gemma-space-5);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  margin-top: var(--gemma-space-7);
  margin-bottom: var(--gemma-space-3);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  margin-top: var(--gemma-space-5);
  margin-bottom: var(--gemma-space-2);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

.md-typeset h4 {
  margin-top: var(--gemma-space-4);
  font-size: 0.9rem;
  font-weight: 700;
}

/* -------------------------------------------------------------------
   Reading rhythm
   ------------------------------------------------------------------- */
.md-typeset hr {
  margin: var(--gemma-space-6) 0;
  border-bottom: 1px solid var(--gemma-border);
}

.md-typeset a {
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------------------
   Page mark
   A product image floated beside a page's opening prose. Floated rather
   than placed in a grid so the text wraps around it and the page needs
   no wrapper element; drops below the prose on narrow screens.
   ------------------------------------------------------------------- */
.md-typeset .page-mark {
  float: right;
  width: 8.25rem;
  max-width: 33%;
  height: auto;
  margin: 0 0 var(--gemma-space-4) var(--gemma-space-5);
}

@media screen and (max-width: 37.5em) {
  .md-typeset .page-mark {
    float: none;
    display: block;
    max-width: 6rem;
    margin: 0 0 var(--gemma-space-4);
  }
}