@import url("https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&family=Noto+Sans+Malayalam:wght@400;600&family=Archivo:wght@400;600&display=swap");

:root { --ml-stack: "Manjari", "Noto Sans Malayalam", "Malayalam Sangam MN", sans-serif; }

/* Malayalam leads: full size, full contrast. Conjuncts stack vertically, so the
   line-height has to be generous or they clip. */
.md-typeset h1,
.md-typeset h2,
.md-nav__title,
.md-header__topic,
.ml,
.md-typeset .admonition-title { font-family: var(--ml-stack); line-height: 1.7; }

.md-typeset h1 { font-weight: 600; }

/* English follows: smaller, quieter, never competing for the eye. */
.en {
  display: block;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: .78em;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
}
.subtitle { margin-top: -.7rem; margin-bottom: 1.4rem; }
.lede { font-size: 1.08rem; margin-bottom: .2rem; }

/* Numbered steps: number, Malayalam, then English under it. */
.md-typeset .step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .1rem .6rem;
  margin: 0 0 1.15rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset .step b {
  grid-row: 1 / span 2;
  font-family: "Archivo", sans-serif;
  font-size: 1.15rem;
  color: var(--md-accent-fg-color);
  line-height: 1.6;
}
.md-typeset .step .ml { font-size: 1rem; }
.md-typeset .step .en { margin-top: .1rem; }
.md-typeset .spec { font-variant-numeric: tabular-nums; }

.md-typeset .admonition .en { margin-top: .5rem; }
.md-typeset table:not([class]) { font-size: .78rem; }
.md-nav__link { line-height: 1.6; }

/* Steps: number, icon, then the text block. */
.md-typeset .step {
  display: grid;
  grid-template-columns: 1.7rem 1.9rem 1fr;
  align-items: start;
  gap: .5rem;
  margin: 0 0 1.15rem;
  padding-bottom: .95rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-typeset .step > b {
  font-family: "Archivo", sans-serif;
  font-size: 1.15rem;
  color: var(--md-accent-fg-color);
  line-height: 1.5;
}
.md-typeset .step-icon { display:block; margin-top:.15rem; color: var(--md-default-fg-color--light); opacity:.9; }
.md-typeset .step-icon svg { width: 1.5rem; height: 1.5rem; display: block; }
.md-typeset .step-text .ml { font-size: 1rem; }
.md-typeset .step-fig {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: .7rem 0 .2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 2px;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
@media screen and (max-width: 40em) {
  .md-typeset .step { grid-template-columns: 1.4rem 1.6rem 1fr; gap: .4rem; }
  .md-typeset .step-fig { max-width: 100%; }
}

/* Generated geometry diagrams. Inlined, so currentColor is the page colour. */
.md-typeset .step-fig svg { width: 100%; height: auto; display: block; }
.md-typeset .diagram .d-bg{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.45}
.md-typeset .diagram .d-unit{fill:#6A8CB4;stroke:#2b3f57;stroke-width:.8}
.md-typeset .diagram .d-dark{fill:#223A5E}
.md-typeset .diagram .d-mid{fill:#7E93A8}
.md-typeset .diagram .d-light{fill:#DCD6C6}
.md-typeset .diagram .d-red{fill:#A8432A}
.md-typeset .diagram .d-line{fill:none;stroke:#A8432A;stroke-width:1.6;stroke-linecap:round}
.md-typeset .diagram .d-thin{fill:none;stroke:currentColor;stroke-width:.8;opacity:.5}
.md-typeset .diagram .d-dash{fill:none;stroke:#A8432A;stroke-width:1.2;stroke-dasharray:4 3}
.md-typeset .diagram .d-t{font:600 8px Archivo,sans-serif;fill:currentColor}
.md-typeset .diagram .d-ok{font:700 11px Archivo,sans-serif;fill:#2e7d32}
.md-typeset .diagram .d-no{font:700 11px Archivo,sans-serif;fill:#A8432A}

/* Action drawings: the verb, not the noun. They take the icon's place and sit
   beside the text on wide screens, above it on a phone. */
.md-typeset .step-wide { grid-template-columns: 1.7rem minmax(0, 1fr) 12rem; }
.md-typeset .step-wide > .step-text { min-width: 0; }
.md-typeset .step-act { align-self: start; }
.md-typeset .step-act svg { width: 100%; height: auto; display: block; }
.md-typeset .action .a-cloth,
.md-typeset .action .a-obj { fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; }
.md-typeset .action .a-line { fill:none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.md-typeset .action .a-thin { fill:none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; opacity: .75; }
.md-typeset .action .a-dash { fill:none; stroke:#A8432A; stroke-width:2; stroke-dasharray:6 4; }
.md-typeset .action .a-ghost { fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-dasharray:3 3; opacity:.4; }
.md-typeset .action .a-water { fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; opacity:.6; }
.md-typeset .action .a-move,
.md-typeset .action .a-shrink { fill:none; stroke:#A8432A; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.md-typeset .action .a-num { font:600 11px Archivo,sans-serif; fill:currentColor; }
.md-typeset .action .a-ok-c { fill:none; stroke:#2e7d32; stroke-width:2; }
.md-typeset .action .a-ok { fill:none; stroke:#2e7d32; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }
.md-typeset .action .a-no-c { fill:none; stroke:#A8432A; stroke-width:2; }
.md-typeset .action .a-no { fill:none; stroke:#A8432A; stroke-width:2.4; stroke-linecap:round; }
@media screen and (max-width: 55em) {
  .md-typeset .step-wide { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .md-typeset .step-act { grid-column: 2; max-width: 18rem; margin-top: .7rem; }
}

/* Swatches and surfaces used by the action drawings. Fabric colours are literal
   -- they stand for real cloth, not UI, so they hold in both themes. */
.md-typeset .action .a-fillbox { fill: currentColor; opacity: .18; }
.md-typeset .action .a-unit-sw { fill: #6A8CB4; stroke: #2b3f57; stroke-width: .8; }
.md-typeset .action .a-red-sw { fill: #A8432A; }
.md-typeset .action .a-cream-sw { fill: #DCD6C6; stroke: #9a927e; stroke-width: .8; }
.md-typeset .action .a-grey-sw { fill: #8a8a8a; }
.md-typeset .action .a-grey2-sw { fill: #4a4a4a; }
.md-typeset .action .a-bg-panel { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .5; }
.md-typeset .action .a-stain { fill: none; stroke: #A8432A; stroke-width: 2; opacity: .8; }
.md-typeset .action .a-pinhead { fill: #A8432A; }
/* brochure frames reused on the bag page carry their own class names */
.md-typeset .brochure .cut { fill: none; stroke: currentColor; stroke-width: .5; }
.md-typeset .brochure .lining { fill: none; stroke: currentColor; stroke-width: .5;
  stroke-dasharray: 2 1.4; }
.md-typeset .brochure .field { fill: none; stroke: #A8432A; stroke-width: .6; stroke-dasharray: 2.5 1.5; }
.md-typeset .brochure .seam { fill: none; stroke: #A8432A; stroke-width: 1.2; stroke-linecap: round; }
.md-typeset .brochure .fold { fill: none; stroke: currentColor; stroke-width: .45;
  stroke-dasharray: 2 1.5; opacity: .6; }
.md-typeset .brochure .dim { fill: none; stroke: currentColor; stroke-width: .35; }
.md-typeset .brochure .unit { fill: #6A8CB4; stroke: #2b3f57; stroke-width: .3; }
.md-typeset .brochure .unitd { fill: #223A5E; }
.md-typeset .brochure .unitl { fill: #DCD6C6; }
.md-typeset .brochure .unitr { fill: #A8432A; }
.md-typeset .brochure .ts { font: 2.6px Archivo, sans-serif; fill: currentColor; opacity: .8; }

/* Labels inside the drawings: Malayalam leads, English under it. */
.md-typeset .action .a-ml, .md-typeset .diagram .d-ml {
  font-family: "Manjari", "Noto Sans Malayalam", sans-serif;
  font-size: 8.5px; fill: currentColor;
}
.md-typeset .action .a-en, .md-typeset .diagram .d-en {
  font-family: "Archivo", sans-serif; font-size: 6.4px;
  fill: currentColor; opacity: .62;
}