/* docs.ihasmail.org: what the docs add to ihasmail.org's look (styles.css,
   copied from the site). The site's tokens throughout, so the docs follow
   its palette, light and dark: ink outlines, hard shadows, stamps, airmail.
   A page is a letter between two folders: its section on the left, its own
   headings on the right, and the site's tab bar along the bottom. */

:root {
  --violet-ink: #c7b8ff;
  --sky-ink: #9fdcf5;
}
:root[data-theme="light"] {
  --violet-ink: #5f45b8;
  --sky-ink: #1d6a8c;
}
.tone-teal    { --stamp-fill: #46cac3; --sec-fill: #46cac3; --tone-ink: var(--teal-ink); }
.tone-orange  { --stamp-fill: #f9a34b; --sec-fill: #f9a34b; --tone-ink: var(--orange-ink); }
.tone-violet  { --stamp-fill: #b9a6f7; --sec-fill: #b9a6f7; --tone-ink: var(--violet-ink); }
.tone-sky     { --stamp-fill: #8fd3f0; --sec-fill: #8fd3f0; --tone-ink: var(--sky-ink); }
.tone-amber   { --stamp-fill: #f6c453; --sec-fill: #f6c453; --tone-ink: var(--orange-ink); }
.tone-emerald { --stamp-fill: #6fd39b; --sec-fill: #6fd39b; --tone-ink: var(--teal-ink); }
.tone-slate   { --stamp-fill: #a9bcc4; --sec-fill: #a9bcc4; --tone-ink: var(--muted); }

.docs-tag {
  margin-left: 4px; padding: 2px 8px; border-radius: 6px;
  font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #12303d; background: var(--orange); border: 2px solid var(--line); transform: rotate(-4deg);
}

/* A reading-progress line along the top edge of the window. */
.read-progress { position: fixed; z-index: 55; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, var(--teal), var(--orange)); pointer-events: none; transition: width .1s linear; }

/* ---- the page: folder, letter, on this page ---- */
.docs-main {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 220px; grid-template-areas: "folder doc onpage";
  gap: 34px; align-items: start;
  max-width: 1400px; margin: 0 auto; padding: 12px 24px 96px;
}
.doc-folder { grid-area: folder; }
.docs-main > .doc { grid-area: doc; }
.onpage { grid-area: onpage; }

.doc {
  min-width: 0; width: 100%; max-width: 880px; justify-self: center;
  padding: 44px 52px 40px;
  background: var(--airmail) top left / 100% 9px no-repeat, var(--card);
  border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--lift-lg);
}

.doc-folder, .onpage {
  position: sticky; top: 20px;
  max-height: calc(100vh - var(--dock-h) - 70px); overflow: auto; scrollbar-width: thin;
  padding: 16px 14px 14px;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--lift);
}
.folder-stamp { --stamp-fill: var(--sec-fill, var(--orange)); margin: 0 0 12px 2px; font-size: 11.5px; padding: 6px 12px; }
.doc-folder nav { display: flex; flex-direction: column; gap: 2px; }
.doc-folder a, .section-cards ul a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 10px; border: 2px solid transparent;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; line-height: 1.3;
}
.doc-folder a:hover, .section-cards ul a:hover { background: var(--paper-2); border-color: var(--line); }
.doc-folder a.here { background: var(--stamp-fill); color: #12303d; border-color: var(--line); box-shadow: var(--lift-sm); }
.doc-folder a.here .ftile { --stamp-fill: #fffdf8; }
.doc-folder a.fsub { margin-left: 40px; padding: 4px 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.doc-folder a.fsub.here { color: #12303d; }

.op-title { display: block; margin: 0 0 10px; font-family: var(--ui); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.onpage { font-size: 13.5px; }
.onpage ul { list-style: none; margin: 0; padding: 0; border-left: 2px dashed var(--rule); }
.onpage li a { display: block; margin-left: -2px; padding: 4px 0 4px 12px; border-left: 3px solid transparent; color: var(--faint); text-decoration: none; line-height: 1.35; transition: color .15s, border-color .15s; }
.onpage li.h3 a { padding-left: 24px; }
.onpage li a:hover { color: var(--text); }
.onpage li a[aria-current="true"] { color: var(--teal-ink); border-left-color: var(--teal); font-weight: 700; }
.op-foot { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--rule); }
.op-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-weight: 600; }
.op-foot a:hover { color: var(--teal-ink); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal-ink); }
.doc-title { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; }
.ftile.ftile-lg { width: 54px; height: 62px; font-size: 26px; --perf: 3px; filter: drop-shadow(2px 2px 0 var(--line)); }
.doc-eyebrow { margin: 0 0 4px; font-family: var(--ui); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink); }
.doc-title:has(.tone-teal) .doc-eyebrow { color: var(--teal-ink); }
.doc-title:has(.tone-orange) .doc-eyebrow { color: var(--orange-ink); }
.doc-title:has(.tone-violet) .doc-eyebrow { color: var(--violet-ink); }
.doc-title:has(.tone-sky) .doc-eyebrow { color: var(--sky-ink); }
.doc h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; }
.doc-lead { margin: 0 0 10px; font-size: 18.5px; line-height: 1.55; color: var(--muted); }
.doc-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 30px; font-family: var(--mono); font-size: 12px; color: var(--faint); }

.onpage-fold { display: none; margin: 0 0 28px; border: 2px solid var(--line); border-radius: 12px; background: var(--card-2); box-shadow: var(--lift-sm); }
.onpage-fold summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-family: var(--ui); font-weight: 700; font-size: 14px; }
.onpage-fold ul { list-style: none; margin: 0; padding: 0 14px 12px; font-size: 14.5px; }
.onpage-fold li { margin: 5px 0; } .onpage-fold li.h3 { padding-left: 14px; }
.onpage-fold a { color: var(--muted); text-decoration: none; } .onpage-fold a:hover { color: var(--teal-ink); }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.pn {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
  background: var(--card-2); color: var(--text); text-decoration: none;
  border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--lift-sm);
  transition: transform .12s, box-shadow .12s;
}
.pn:hover { transform: translate(-2px, -2px); box-shadow: var(--lift); }
.pn .dir { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-ink); }
.pn strong { font-family: var(--display); font-variation-settings: "SOFT" 100; font-size: 20px; font-weight: 700; }
.pn small { color: var(--faint); font-size: 13px; }
.pn.next { grid-column: 2; text-align: right; align-items: flex-end; }

/* ---- the words ---- */
.doc-prose { font-size: 16.5px; line-height: 1.72; color: var(--muted); }
.doc-prose > :first-child { margin-top: 0; }
.doc-prose :is(h2, h3, h4) { color: var(--text); position: relative; scroll-margin-top: 24px; }
.doc-prose h2 { font-size: clamp(25px, 2.8vw, 31px); font-weight: 750; letter-spacing: -0.015em; margin: 2.1em 0 0.6em; padding-top: 0.8em; border-top: 2px dashed var(--rule); }
.doc-prose h3 { font-size: 21px; font-weight: 700; margin: 1.8em 0 0.5em; }
.doc-prose h4 { font-size: 17px; font-weight: 700; margin: 1.5em 0 0.4em; }
.doc-prose p { margin: 0 0 1.05em; }
.doc-prose strong { color: var(--text); font-weight: 650; }
.doc-prose a { color: var(--teal-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.doc-prose a:hover { text-decoration-color: var(--orange); }
.doc-prose :is(ul, ol) { padding-left: 1.4em; margin: 0 0 1.1em; }
.doc-prose li { margin: 0.4em 0; }
.doc-prose li::marker { color: var(--orange-ink); }
.doc-prose code { font-family: var(--mono); font-size: 0.86em; color: var(--text); background: var(--code-bg); border: 1.5px solid var(--rule); border-radius: 6px; padding: 1px 5px; }
.doc-prose pre { margin: 1.3em 0; padding: 15px 17px; background: var(--code-bg); border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--lift-sm); overflow-x: auto; font-size: 13px; line-height: 1.65; }
.doc-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; color: var(--text); }
.doc-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--orange); color: var(--text); }
.doc-prose hr { border: 0; border-top: 2px dashed var(--rule); margin: 2.4em 0; }
.doc-prose img { max-width: 100%; height: auto; border-radius: 10px; }
.doc-prose figure { margin: 1.8em auto; max-width: 100%; }
.doc-prose figure img.shot { display: block; width: 100%; border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--lift); }
.doc-prose figcaption { margin: 0.8em auto 0; max-width: 46rem; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
.doc-prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0 1.4em; font-size: 14.5px; }
.doc-prose :is(th, td) { padding: 9px 12px; border-bottom: 2px dashed var(--rule); text-align: left; vertical-align: top; }
.doc-prose th { color: var(--text); font-weight: 700; border-bottom: 2px solid var(--line); }
.doc-prose td code { white-space: nowrap; }
.doc-prose .anchor { position: absolute; left: -1em; padding-right: 0.25em; color: var(--orange-ink); text-decoration: none; opacity: 0; font-weight: 500; }
.doc-prose :is(h2, h3):hover .anchor, .doc-prose .anchor:focus { opacity: 1; }
.code-wrap { position: relative; }
.code-wrap pre { padding-right: 54px; }
.code-copy { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 2px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s; font-size: 14px; box-shadow: var(--lift-sm); }
.code-wrap:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { background: var(--teal); color: var(--on-fill); }
.code-copy.done { background: var(--teal); color: var(--on-fill); opacity: 1; }
.code-copy svg { width: 1em; height: 1em; }

/* A code block's file name, on the block. */
.doc-prose .highlight > .filename { display: block; margin-top: 1.3em; padding: 7px 16px; font: 700 12px var(--mono); color: #12303d; background: var(--orange); border: 2px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; }
.doc-prose .highlight > .filename + pre, .doc-prose .highlight > .filename + .code-wrap pre { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* Code colors. HotDog colors a code block that names its language when the
   site is built, with Pygments' class names. Each hue is mixed into the
   code's own text color, so one set reads on the light code blocks and the
   dark ones. hl_lines marks lines with .hll. */
.highlight { --code-keyword: #7c5cff; --code-string: #0e8f87; --code-number: #d4700a; --code-function: #2a8fc4; --code-type: #0f9488; --code-tag: #e0566b; }
.highlight :is(.k, .kd, .kn, .kp, .kr, .ow, .cp, .cpf, .nd) { color: color-mix(in srgb, var(--code-keyword) 60%, currentColor); }
.highlight :is(.s, .sa, .sb, .sc, .dl, .sd, .s1, .s2, .sh, .sx, .sr, .ss, .l, .ld, .gi) { color: color-mix(in srgb, var(--code-string) 60%, currentColor); }
.highlight :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .se, .si, .no, .kc, .na) { color: color-mix(in srgb, var(--code-number) 60%, currentColor); }
.highlight :is(.nf, .fm, .nc, .nn, .ne, .gh, .gu) { color: color-mix(in srgb, var(--code-function) 60%, currentColor); }
.highlight :is(.kt, .nb, .bp) { color: color-mix(in srgb, var(--code-type) 60%, currentColor); }
.highlight :is(.nt, .nv, .vc, .vg, .vi, .vm, .gd, .gr, .gt) { color: color-mix(in srgb, var(--code-tag) 60%, currentColor); }
.highlight :is(.c, .ch, .cm, .c1, .cs, .gp, .go) { color: color-mix(in srgb, currentColor 72%, transparent); }
.highlight :is(.c, .ch, .cm, .c1, .cs, .ge) { font-style: italic; }
.highlight :is(.gh, .gu, .gs) { font-weight: 700; }
.highlight .hll { display: block; margin: 0 -17px; padding: 0 17px; background: color-mix(in srgb, var(--orange) 22%, transparent); }

/* ---- the network diagrams: inline SVG, colored from the site's tokens,
   so they follow the theme. Class names from the MkDocs stylesheet. ---- */
.ihm-figure { margin: 1.8em 0; overflow-x: auto; }
.ihm-diagram { display: block; height: auto; margin: 0 auto; min-width: 26rem; max-width: 34rem; width: 100%; }
.ihm-diagram .ihm-node rect { fill: var(--card-2); stroke: var(--faint); stroke-width: 0.75; }
.ihm-diagram .ihm-node-app rect { fill: color-mix(in srgb, var(--teal) 20%, var(--card)); stroke: var(--teal-ink); stroke-width: 1.25; }
.ihm-diagram .ihm-group rect { fill: none; stroke: var(--faint); stroke-dasharray: 4 3; stroke-width: 0.75; }
.ihm-diagram .ihm-t { fill: var(--text); font-size: 14px; font-weight: 600; }
.ihm-diagram .ihm-s { fill: var(--muted); font-size: 12px; }
.ihm-diagram .ihm-p { font-size: 11px; font-weight: 600; }
.ihm-diagram .ihm-p-jmap { fill: var(--teal-ink); }
.ihm-diagram .ihm-p-smtp { fill: var(--orange-ink); }
.ihm-diagram :is(.ihm-link, .ihm-jmap, .ihm-smtp) { fill: none; stroke-width: 1.5; }
.ihm-diagram .ihm-link { stroke: var(--muted); }
.ihm-diagram .ihm-jmap { stroke: var(--teal-ink); }
.ihm-diagram .ihm-smtp { stroke: var(--orange-ink); }
.ihm-diagram-ha { max-width: 42rem; min-width: 30rem; }
.ihm-diagram .ihm-noshare { fill: none; stroke: var(--orange-ink); stroke-dasharray: 3 3; stroke-width: 1.5; }
.ihm-diagram .ihm-p-warn { fill: var(--orange-ink); }
.ihm-diagram .ihm-halo { paint-order: stroke fill; stroke: var(--card); stroke-linejoin: round; stroke-width: 4px; }

/* ---- notes, folding notes, tabs, keys, terms: MkDocs' markup, drawn as
   stickers with a colored edge ---- */
.doc-prose :is(.admonition, details) {
  --adm: var(--teal);
  margin: 1.5em 0; padding: 0 18px; color: var(--muted);
  background: var(--card-2); border: 2px solid var(--line); border-left: 9px solid var(--adm);
  border-radius: 12px; box-shadow: var(--lift-sm);
}
.doc-prose :is(.admonition, details) > :last-child { margin-bottom: 14px; }
.doc-prose :is(.admonition-title, details > summary) {
  margin: 0 -18px; padding: 10px 18px; font-family: var(--ui); font-weight: 700; color: var(--text);
  background: color-mix(in srgb, var(--adm) 20%, var(--card-2));
}
.doc-prose .admonition-title { margin-bottom: 12px; border-radius: 0 9px 0 0; border-bottom: 2px solid var(--line); }
.doc-prose details > summary { cursor: pointer; list-style-position: inside; border-radius: 0 9px 9px 0; }
.doc-prose details[open] > summary { margin-bottom: 12px; border-radius: 0 9px 0 0; border-bottom: 2px solid var(--line); }
.doc-prose :is(.admonition, details):is(.note, .abstract, .summary, .tldr, .info, .todo) { --adm: #8fd3f0; }
.doc-prose :is(.admonition, details):is(.tip, .hint, .important) { --adm: #46cac3; }
.doc-prose :is(.admonition, details):is(.success, .check, .done) { --adm: #6fd39b; }
.doc-prose :is(.admonition, details):is(.question, .help, .faq) { --adm: #f6c453; }
.doc-prose :is(.admonition, details):is(.warning, .caution, .attention) { --adm: #f9a34b; }
.doc-prose :is(.admonition, details):is(.failure, .fail, .missing, .danger, .error, .bug) { --adm: #f07a7a; }
.doc-prose :is(.admonition, details):is(.example) { --adm: #b9a6f7; }
.doc-prose :is(.admonition, details):is(.quote, .cite) { --adm: #a9bcc4; }

.doc-prose .tabbed-set { position: relative; display: flex; flex-direction: column; margin: 1.5em 0; background: var(--card-2); border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--lift-sm); }
.doc-prose .tabbed-set > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.doc-prose .tabbed-labels { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; border-bottom: 2px solid var(--line); }
.doc-prose .tabbed-labels > label { padding: 8px 12px; cursor: pointer; color: var(--faint); font-family: var(--ui); font-weight: 700; font-size: 0.9em; border: 2px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; margin-bottom: -2px; }
.doc-prose .tabbed-labels > label:hover { color: var(--text); }
.doc-prose .tabbed-content { padding: 0 18px; }
.doc-prose .tabbed-block { display: none; }
.doc-prose .tabbed-set > input:nth-child(1):checked ~ .tabbed-content > .tabbed-block:nth-child(1),
.doc-prose .tabbed-set > input:nth-child(2):checked ~ .tabbed-content > .tabbed-block:nth-child(2),
.doc-prose .tabbed-set > input:nth-child(3):checked ~ .tabbed-content > .tabbed-block:nth-child(3),
.doc-prose .tabbed-set > input:nth-child(4):checked ~ .tabbed-content > .tabbed-block:nth-child(4),
.doc-prose .tabbed-set > input:nth-child(5):checked ~ .tabbed-content > .tabbed-block:nth-child(5),
.doc-prose .tabbed-set > input:nth-child(6):checked ~ .tabbed-content > .tabbed-block:nth-child(6),
.doc-prose .tabbed-set > input:nth-child(7):checked ~ .tabbed-content > .tabbed-block:nth-child(7),
.doc-prose .tabbed-set > input:nth-child(8):checked ~ .tabbed-content > .tabbed-block:nth-child(8) { display: block; }
.doc-prose .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > label:nth-child(1),
.doc-prose .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > label:nth-child(2),
.doc-prose .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > label:nth-child(3),
.doc-prose .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > label:nth-child(4),
.doc-prose .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > label:nth-child(5),
.doc-prose .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > label:nth-child(6),
.doc-prose .tabbed-set > input:nth-child(7):checked ~ .tabbed-labels > label:nth-child(7),
.doc-prose .tabbed-set > input:nth-child(8):checked ~ .tabbed-labels > label:nth-child(8) { color: #12303d; background: var(--teal); border-color: var(--line); }
.doc-prose .tabbed-set > input:focus-visible ~ .tabbed-labels { outline: 3px solid var(--orange); outline-offset: -2px; border-radius: 10px 10px 0 0; }

.doc-prose .keys { white-space: nowrap; }
.doc-prose .keys > span { margin: 0 0.15em; color: var(--faint); }
.doc-prose kbd, .doc-prose .keys kbd { font-family: var(--mono); font-size: 0.8em; color: var(--text); background: var(--paper-2); border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 6px; padding: 0.05em 0.45em; }
.doc-prose dl { margin: 1.2em 0; }
.doc-prose dt { margin-top: 0.8em; color: var(--text); font-weight: 700; }
.doc-prose dd { margin: 0.2em 0 0 1.4em; }

/* MkDocs Material's "grid cards": a list shown as a grid of cards. The
   site's own .grid (the feature grid) mustn't take the wrapper. */
.doc-prose .grid.cards { display: block; }
.doc-prose .grid.cards > ul { list-style: none; margin: 1.2em 0 1.6em; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 14px; }
.doc-prose .grid.cards > ul > li { margin: 0; padding: 14px 16px; background: var(--card-2); border: 2px solid var(--line); border-radius: 12px; box-shadow: var(--lift-sm); transition: transform .12s, box-shadow .12s; }
.doc-prose .grid.cards > ul > li:hover { transform: translate(-2px, -2px); box-shadow: var(--lift); }
.doc-prose .grid.cards > ul > li > :first-child { margin-top: 0; }
.doc-prose .grid.cards > ul > li > :last-child { margin-bottom: 0; }
.doc-prose .grid.cards > ul > li p { margin: 0.35em 0 0; font-size: 0.94em; }
.doc-prose .grid.cards > ul > li strong a { text-decoration: none; }

/* ---- search, in the site's mailbox ---- */
.docs-search { width: min(980px, calc(100vw - 32px)); }
.docs-search .mailbox-folders { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 760px) { .docs-search { width: 100%; } .docs-search .mailbox-folders { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .docs-search .mailbox-folders { grid-template-columns: 1fr; } }
.mailbox-folders a.fsub { margin-left: 28px; font-size: 13.5px; }
.mailbox-folders a[aria-current="page"] { background: var(--paper-2); border-color: var(--line); }
.folder-recent[hidden] { display: none; }
.mailbox-results .pl-group { display: block; margin: 8px 0 2px; padding: 4px 8px; cursor: default; border: 0; font-family: var(--ui); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-ink); }
.mailbox-results .pl-group:hover { background: none; }
.mailbox-results .pl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mailbox-results .pl-text .pl-name, .mailbox-results .pl-text .pl-note { margin-left: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-results mark { background: none; color: var(--teal-ink); font-weight: 800; }
.mailbox-results li[aria-selected="true"] mark { color: inherit; text-decoration: underline; }
.pl-ico { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; border: 2px dashed var(--rule); color: var(--faint); font-size: 15px; }

/* ---- the docs' front page ---- */
.docs-hero { padding: 36px 0 44px; }
.docs-hero h1 { margin: 4px 0 14px; font-size: clamp(40px, 5.6vw, 72px); font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.docs-hero-lead { margin: 0 0 28px; max-width: 40em; font-size: 19px; color: var(--muted); }
.hero-jump {
  display: flex; align-items: center; gap: 12px; width: min(600px, 100%); height: 58px; padding: 0 16px;
  background: var(--card); color: var(--faint); cursor: pointer; text-align: left;
  border: 2px solid var(--line); border-radius: 14px; box-shadow: var(--lift);
  font-family: var(--ui); font-weight: 600; font-size: 16px;
  transition: transform .12s, box-shadow .12s;
}
.hero-jump .i { font-size: 20px; color: var(--teal-ink); }
.hero-jump .jump-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-jump:hover { transform: translate(-2px, -2px); box-shadow: var(--lift-lg); color: var(--text); }
.hero-jump[hidden] { display: none; }

.docs-home { padding-bottom: 96px; }
.section-cards { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.section-cards > li { padding: 18px 16px 14px; background: var(--card); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--lift); }
.section-cards > li:nth-child(1) { transform: rotate(-0.5deg); }
.section-cards > li:nth-child(3) { transform: rotate(0.5deg); }
.sc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.sc-head .folder-stamp { margin: 0; }
.sc-count { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.section-cards ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-doc { max-width: 880px; justify-self: start; }

/* ---- narrower ---- */
@media (max-width: 1280px) {
  .docs-main { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "folder doc"; }
  .onpage { display: none; }
  .onpage-fold { display: block; }
}
@media (max-width: 1000px) {
  .docs-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "doc"; }
  .doc-folder { display: none; }
  .section-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .prevnext { grid-template-columns: minmax(0, 1fr); }
  .pn.next { grid-column: auto; }
  .doc { padding: 30px 26px 28px; }
  .section-cards { grid-template-columns: 1fr; }
  .section-cards > li { transform: none !important; }
}
@media (max-width: 560px) {
  .docs-main { padding: 4px 12px 80px; }
  .doc { padding: 26px 18px 24px; border-radius: 14px; }
  .ftile.ftile-lg { width: 44px; height: 50px; font-size: 21px; }
  .masthead .docs-tag { display: none; }
}
/* The masthead has a docs tag and one more button than the site's; on a
   small phone the footer carries the link back instead. */
@media (max-width: 440px) {
  .masthead-end .btn-sm { display: none; }
}