/* ============================================
   ABITELLO Playbook — stylesheet for Material for MkDocs

   Taken unchanged from the SUMMERMATTER Playbook on 2026-11-10 (AB1): the same layout and colours,
   until Abitello has a corporate design of its own. The notes below are SUMMERMATTER's.

   Colours: the original SUMMERMATTER look (PB2/PB4, white ground), with blue and orange
   swapped on 2026-11-09 at the same tone and brightness: the links take the sky blue of the
   old boxes and favicon at the depth of the old orange links; the boxes take the orange at
   the lightness of the old blue wash.
   Layout: IRIS's and KETO's — font, sizes, distance from the top; panels with a thin line
   and 10px corners; small upper-case section headings. Wider than IRIS, for three columns.

   Light                         Dark
     Text        #0F172A           #E1E1E1           — slate ink: titles, body, text in boxes
     Secondary   #6B6A66           #9B9A97           — warm grey: section headings, table heads, captions
     Links       #0369A1           #38BDF8           — sky blue, no underline, everywhere
     Link hover  #0EA5E9           #7DD3FC           — lighter sky blue, underlined, everywhere
     Accent      #0EA5E9           #38BDF8           — the gates in a diagram, a pill; slate text on it
     Box         #E0F2FE           #E0F2FE           — light blue wash: the TL;DR box, a note; slate text, both modes
     Important   #FFEDD5           #FFEDD5           — light orange wash: a warning, the one thing not to miss;
                                                      a link in either box keeps the light-mode blue
     Favicon     #E0F2FE dot       — the light blue of the TL;DR box
     Lines       #E9E9E7           #2F2F2F
     Ground      #FFFFFF           #191919           — the page
     Soft        #F7F7F5           #252525           — code, a row under the pointer, a diagram's lanes
   Font: IRIS's system stack, 15px body, 20px title; the site's name 20px from the top.
   ============================================ */

/* --- Colours, light --- */
:root,
[data-md-color-scheme="default"] {
  --sm-text:        #0F172A;
  --sm-text-light:  #6B6A66;
  --sm-link:        #0369A1;
  --sm-link-hover:  #0EA5E9;
  --sm-accent:      #0EA5E9;
  --sm-accent-on:   #0F172A;
  --sm-border:      #E9E9E7;
  --sm-ground:      #FFFFFF;
  --sm-panel:       #FFFFFF;
  --sm-hover:       #F7F7F5;
  --sm-tldr-bg:     #E0F2FE;
  --sm-important-bg: #FFEDD5;
  --sm-tldr-text:   #0F172A;

  --md-primary-fg-color:              var(--sm-ground);
  --md-primary-fg-color--light:       var(--sm-ground);
  --md-primary-fg-color--dark:        var(--sm-ground);
  --md-primary-bg-color:              var(--sm-text);
  --md-primary-bg-color--light:       var(--sm-text-light);
  --md-accent-fg-color:               var(--sm-accent);
  --md-accent-fg-color--transparent:  rgba(14, 165, 233, 0.1);

  --md-default-bg-color:              var(--sm-ground);
  --md-default-fg-color:              var(--sm-text);
  --md-default-fg-color--light:       var(--sm-text-light);
  --md-typeset-color:                 var(--sm-text);
  --md-typeset-a-color:               var(--sm-link);
  --md-typeset-table-color:           var(--sm-border);
  --md-code-bg-color:                 var(--sm-hover);
  --md-code-fg-color:                 var(--sm-text);
}

/* --- Colours, dark --- */
[data-md-color-scheme="slate"] {
  --sm-text:        #E1E1E1;
  --sm-text-light:  #9B9A97;
  --sm-link:        #38BDF8;
  --sm-link-hover:  #7DD3FC;
  --sm-accent:      #38BDF8;
  --sm-accent-on:   #0F172A;
  --sm-border:      #2F2F2F;
  --sm-ground:      #191919;
  --sm-panel:       #202020;
  --sm-hover:       #252525;
  --sm-tldr-bg:     #E0F2FE;
  --sm-important-bg: #FFEDD5;
  --sm-tldr-text:   #0F172A;

  --md-primary-fg-color:              var(--sm-ground);
  --md-primary-fg-color--light:       var(--sm-ground);
  --md-primary-fg-color--dark:        var(--sm-ground);
  --md-primary-bg-color:              var(--sm-text);
  --md-primary-bg-color--light:       var(--sm-text-light);
  --md-accent-fg-color:               var(--sm-accent);
  --md-accent-fg-color--transparent:  rgba(56, 189, 248, 0.15);

  --md-default-bg-color:              var(--sm-ground);
  --md-default-fg-color:              var(--sm-text);
  --md-default-fg-color--light:       var(--sm-text-light);
  --md-typeset-color:                 var(--sm-text);
  --md-typeset-a-color:               var(--sm-link);
  --md-typeset-table-color:           var(--sm-border);
  --md-code-bg-color:                 var(--sm-hover);
  --md-code-fg-color:                 var(--sm-text);
  --md-hue: 0;
}

/* --- Sizes: one rem is 20px at every width, so 0.75rem is IRIS's 15px everywhere
   (Material grows the root to 22px and 24px on wide screens) --- */
@media screen and (min-width: 100em) { html { font-size: 125%; } }
@media screen and (min-width: 125em) { html { font-size: 125%; } }

/* --- Font: IRIS's stack, drawn as IRIS draws it (Material thins it with antialiasing) --- */
body,
input {
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

body {
  background-color: var(--sm-ground);
  -webkit-text-size-adjust: 100%;
}

/* --- The column: Material's 1220px, wider than IRIS's 1080px, so the menu and the page's
   headings both have a column of their own (Simon, 2026-11-09) --- */
.md-grid {
  max-width: 61rem;
}

/* --- Header: the ground, no line, no shadow. The site's name stands where IRIS's and
   KETO's title stands: 20px from the top, 20px bold, 16px from the column's edge --- */
.md-header,
.md-header--shadow {
  background-color: var(--sm-ground);
  color: var(--sm-text);
  box-shadow: none;
}

.md-header__inner {
  align-items: flex-start;
  padding: 20px 16px 8px;
}

.md-header__title {
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* On a phone the name shrinks a little, so it is not cut off between the two buttons */
@media screen and (max-width: 30em) {
  .md-header__title {
    font-size: 16px;
  }
}

.md-header__button {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}

@media screen and (min-width: 76.25em) {
  [dir=ltr] .md-header__title {
    margin-left: 0;
  }

  /* The menu's links start at the same 16px as the name above them
     (the menu adds 16px of its own), and the page ends 16px before the column's edge */
  .md-main__inner {
    padding: 0 16px 0 0;
  }

  [dir=ltr] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    margin-left: 1.2rem;
  }
}

/* The page starts right under the header, as IRIS's content starts under its title */
.md-main__inner {
  margin-top: 4px;
}

.md-content__inner {
  padding-top: 0;
}

.md-content__inner::before {
  height: 0;
}

.md-sidebar {
  top: 58px;
  padding: 2px 0 1.2rem;
}

/* Hide the logo in the header; the favicon still shows in the browser tab */
.md-header .md-logo {
  display: none;
}

/* --- Search field: a panel with a thin line and round corners --- */
.md-search__form {
  height: 30px;
  background-color: var(--sm-panel);
  border: 1px solid var(--sm-border);
  border-radius: 8px;
}

/* The field stands on the name's line: same top, same 30px height, the glass centred */
.md-search,
.md-search__inner {
  padding-top: 0;
  padding-bottom: 0;
}

.md-search__form .md-search__icon[for="__search"] {
  top: 3px;
}

.md-search__input {
  font-size: 0.75rem;
}

.md-search__form:hover {
  background-color: var(--sm-panel);
}

.md-search__input,
.md-search__icon.md-icon,
.md-search__input::placeholder {
  color: var(--sm-text-light);
}

/* --- Navigation: every entry is a link, so every entry has the link colour --- */
.md-nav {
  font-size: 0.7rem;
}

.md-nav__item .md-nav__link {
  color: var(--sm-link);
  font-weight: 400;
}

.md-nav__link:hover,
.md-nav__link:focus,
.md-nav__item--active > .md-nav__link:hover,
.md-nav__link--active:hover,
.md-nav__container > .md-nav__link--active:hover {
  color: var(--sm-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The right-hand table of contents: links like every other link */
.md-sidebar--secondary .md-nav__link,
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--passed {
  color: var(--sm-link);
  text-decoration: none;
}

/* Current page — semi-bold */
.md-nav__item--active > .md-nav__link,
.md-nav__item .md-nav__link--active {
  color: var(--sm-link);
  font-weight: 600;
}

/* Section titles in the menu */
.md-nav__title {
  font-weight: 600;
  padding-left: 0.6rem;
}

/* A section's own page (section-index) — always semi-bold, it heads the section */
.md-nav__item .md-nav__link--index {
  font-weight: 600;
}

/* The current section's own page — bold */
.md-nav__container > .md-nav__link--active {
  color: var(--sm-link);
  font-weight: 700;
}

/* Hide the sidebar titles (site name above the menu, «Table of contents») */
.md-sidebar--primary .md-nav__title[for="__drawer"],
.md-sidebar--secondary .md-nav__title {
  display: none;
}

/* --- Hand-written breadcrumb line: for Markdown editors only, hidden on the site --- */
.md-content__inner > p:has(+ h1) {
  display: none;
}

/* --- Type: IRIS's sizes. Body 15px, the title 20px, section headings small and upper case --- */
.md-typeset {
  font-size: 0.75rem;
  line-height: 1.55;
}

.md-typeset h1 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--sm-text);
  margin: 0 0 0.6rem;
}

.md-typeset h2 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--sm-text-light);
  margin: 1.5rem 0 0.5rem;
}

.md-typeset h3 {
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--sm-text);
  margin: 1.2rem 0 0.4rem;
}

.md-typeset h4 {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--sm-text-light);
  margin: 0.9rem 0 0.3rem;
}

/* --- Links --- */
.md-typeset a {
  color: var(--sm-link);
  text-decoration: none;
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--sm-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- Code: monospace on a panel --- */
.md-typeset code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background-color: var(--sm-hover);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
  border-radius: 5px;
  padding: 0.05em 0.3em;
}

.md-typeset pre > code {
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
}

.md-typeset hr {
  border-bottom-color: var(--sm-border);
}

/* Material wraps every table in an inline block; a block lets the card span the column */
.md-typeset__table {
  display: block;
}

/* --- Tables: a white card, a thin line, round corners, small upper-case heads --- */
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  font-size: 0.65rem;
  background-color: var(--sm-panel);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background-color: var(--sm-panel);
  color: var(--sm-text-light);
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--sm-border);
  white-space: nowrap;
}

.md-typeset table:not([class]) td {
  padding: 0.45rem 0.6rem;
  border-top: 1px solid var(--sm-border);
  vertical-align: top;
}

.md-typeset table:not([class]) tbody tr:first-child td {
  border-top: none;
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--sm-hover);
  box-shadow: none;
}

/* --- Boxes: IRIS's bands — round corners, no border, no shadow, no bar at the side, slate text.
   The regular box (the TL;DR box, a note, info, tip) is the light blue wash; the important one
   (a warning, danger, «important») is the light orange wash (Simon, 2026-11-09) --- */
.tldr {
  background-color: var(--sm-tldr-bg);
  color: var(--sm-tldr-text);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin: 0.8rem 0 1.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.md-typeset .admonition {
  background-color: var(--sm-tldr-bg);
  color: var(--sm-tldr-text);
  border: none;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.7rem;
  padding: 0 0.9rem;
}

.md-typeset .admonition:is(.warning, .caution, .attention, .danger, .error, .important),
.tldr.important {
  background-color: var(--sm-important-bg);
}

.md-typeset .admonition > .admonition-title {
  background-color: transparent;
  color: var(--sm-tldr-text);
  border: none;
  font-weight: 650;
}

.md-typeset .admonition > .admonition-title::before {
  background-color: var(--sm-tldr-text);
}

.md-typeset .tldr code,
.md-typeset .admonition code {
  color: var(--sm-tldr-text);
  background-color: transparent;
  border-color: var(--sm-border);
}

/* A box is light in both modes, so a link in it keeps the light-mode blue */
[data-md-color-scheme="slate"] .md-typeset .tldr a,
[data-md-color-scheme="slate"] .md-typeset .admonition a {
  color: #0369A1;
}

[data-md-color-scheme="slate"] .md-typeset .tldr a:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition a:hover {
  color: #0EA5E9;
}

/* --- Details: IRIS's quiet fold — a muted line with a triangle, the text below on the ground --- */
.md-typeset details {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0.6rem 0;
  font-size: 0.7rem;
}

.md-typeset details > summary {
  cursor: pointer;
  color: var(--sm-text-light);
  font-size: 0.65rem;
  list-style: revert;
}

.md-typeset details > summary:hover {
  color: var(--sm-text);
}

/* --- Pills: IRIS's filled labels --- */
.md-typeset .pill {
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1.6;
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.08em;
}

.md-typeset .pill-owner { background-color: var(--sm-accent); color: var(--sm-accent-on); }
.md-typeset .pill-machine { background-color: var(--sm-border); color: var(--sm-text-light); }

/* --- Diagrams: inline SVG on a white card; on a phone the card scrolls sideways --- */
.md-typeset .diagram {
  background-color: var(--sm-panel);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 0.4rem;
  margin: 0.8rem 0 1rem;
  overflow-x: auto;
}

.md-typeset .diagram svg {
  display: block;
  width: 100%;
  min-width: 30rem;
  height: auto;
}

.diagram .dg-box   { fill: var(--sm-panel); stroke: var(--sm-border); stroke-width: 1.2; }
.diagram .dg-live  { fill: var(--sm-important-bg); stroke: var(--sm-important-bg); }
.diagram .dg-key   { stroke: var(--sm-accent); stroke-width: 2; }
.diagram .dg-t     { fill: var(--sm-text); font: 600 14px ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .dg-s     { fill: var(--sm-text-light); font: 11.5px ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .dg-live + .dg-t,
.diagram .dg-live + .dg-t + .dg-s { fill: var(--sm-tldr-text); }
.diagram .dg-arrow { fill: none; stroke: var(--sm-text-light); stroke-width: 1.5; }
.diagram .dg-head  { fill: var(--sm-text-light); }
.diagram .dg-gate  { fill: var(--sm-accent); }
.diagram .dg-gn    { fill: var(--sm-accent-on); font: 700 12px ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .dg-num   { fill: var(--sm-text-light); }
.diagram .dg-nn    { fill: var(--sm-panel); font: 700 11px ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
.diagram .dg-lane  { fill: var(--sm-hover); }
.diagram .dg-lane-alt { fill: var(--sm-panel); }
.diagram .dg-sep   { stroke: var(--sm-border); }

/* A diagram or an image opens large on a click (javascripts/zoom.js) */
.md-typeset .diagram,
.md-content img.sm-zoomable {
  cursor: zoom-in;
}

.sm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(15, 23, 42, 0.72);
  cursor: zoom-out;
  overflow: auto;
}

.sm-lightbox__card {
  background-color: var(--sm-panel);
  border-radius: 10px;
  padding: 16px;
  width: min(1400px, 100%);
  max-height: 100%;
  overflow: auto;
}

.sm-lightbox__card svg,
.sm-lightbox__card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 80px);
  border-radius: 0;
}

/* On a phone the large view keeps a readable size and scrolls sideways */
@media screen and (max-width: 44.9375em) {
  .sm-lightbox { padding: 8px; }
  .sm-lightbox__card svg { min-width: 44rem; max-height: none; }
}

/* --- Home: the title is the site's name, which the header already shows --- */
.md-typeset h1.home-title {
  display: none;
}

/* --- Home: quick links, small white cards with a thin line --- */
.md-typeset .quick-links ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem;
  list-style: none;
  margin: 0.4rem 0 1.2rem;
  padding: 0;
}

[dir] .md-typeset .quick-links li {
  margin: 0;
}

.md-typeset .quick-links a {
  display: block;
  height: 100%;
  background-color: var(--sm-panel);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  color: var(--sm-text-light);
  font-size: 0.65rem;
  line-height: 1.45;
}

.md-typeset .quick-links a strong {
  display: block;
  color: var(--sm-link);
  font-size: 0.75rem;
  font-weight: 650;
  margin-bottom: 0.15rem;
}

.md-typeset .quick-links a:hover {
  background-color: var(--sm-hover);
  text-decoration: none;
}

.md-typeset .quick-links a:hover strong {
  color: var(--sm-link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- Colour swatch in a table (page «Corporate design») --- */
.md-typeset .swatch {
  display: inline-block;
  width: 2.4rem;
  height: 1.2rem;
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  vertical-align: middle;
}

/* --- Images --- */
.md-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* --- Video cards: a still image with a play button, linked to the video --- */
.video-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: #191919;
  background-size: cover;
  background-position: center top;
  border-radius: 10px;
  width: 480px;
  max-width: 100%;
  height: 270px;
  text-decoration: none !important;
  margin-bottom: 1rem;
  transition: filter 0.2s;
}

.video-card:hover {
  filter: brightness(1.1);
}

.video-card__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-size: 1.3rem;
  color: #191919;
  padding-left: 3px;
  transition: background 0.2s, transform 0.2s;
}

.video-card:hover .video-card__play {
  background: #FFFFFF;
  transform: scale(1.1);
}

.video-card__title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --- Back to top: a panel with a thin line --- */
.md-top {
  background-color: var(--sm-panel);
  color: var(--sm-text);
  border: 1px solid var(--sm-border);
  box-shadow: none;
}

/* --- Footer: none --- */
.md-footer,
.md-footer-meta {
  display: none;
}