/* Styles for the documentation page (help.php), which prints the contents of help.html.
   Load AFTER login-modern.css. Everything is scoped to .im-login so the rest of the site is unaffected.
   help.html is styled by element type, so it does not need any changes. */

/* give the documentation more room than the login-style split screen */
.im-login:has(.lg-card.lg-doc) { grid-template-columns: minmax(240px, .5fr) minmax(0, 1.7fr); }
.im-login:has(.lg-card.lg-doc) .lg-brand { padding: 40px 32px; }
.im-login:has(.lg-card.lg-doc) .lg-brand h1 { font-size: 32px; }
.im-login:has(.lg-card.lg-doc) .lg-graph { display: none; }

.im-login .lg-card.lg-doc { max-width: 920px; margin: 24px auto; padding: 36px 40px; }

.im-login .lg-doccontent { font-size: 16px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; }
.im-login .lg-doccontent p { margin: 0 0 14px; }

/* headings */
.im-login .lg-doccontent h1,
.im-login .lg-doccontent h2,
.im-login .lg-doccontent h3,
.im-login .lg-doccontent h4,
.im-login .lg-doccontent h5,
.im-login .lg-doccontent h6 { color: var(--ink); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; margin: 1.6em 0 .5em; }
.im-login .lg-doccontent h1 { font-size: 28px; margin-top: 0; }
.im-login .lg-doccontent h2 { font-size: 23px; padding-top: 12px; border-top: 1px solid #E3EAF3; }
.im-login .lg-doccontent > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.im-login .lg-doccontent h3 { font-size: 19px; }
.im-login .lg-doccontent h4 { font-size: 17px; }
.im-login .lg-doccontent h5,
.im-login .lg-doccontent h6 { font-size: 15px; }

/* nested sections: a quiet indent line instead of a fixed margin */
.im-login .lg-doccontent div.h2,
.im-login .lg-doccontent div.h3,
.im-login .lg-doccontent div.h4,
.im-login .lg-doccontent div.h5 { margin-left: 0; }
.im-login .lg-doccontent div.h3,
.im-login .lg-doccontent div.h4,
.im-login .lg-doccontent div.h5 { padding-left: 16px; border-left: 2px solid #E3EAF3; }

/* lists */
.im-login .lg-doccontent ul,
.im-login .lg-doccontent ol { margin: 0 0 14px; padding-left: 24px; }
.im-login .lg-doccontent li { margin: .3em 0; }
.im-login .lg-doccontent li > ul,
.im-login .lg-doccontent li > ol { margin-bottom: 0; }
.im-login .lg-doccontent dt { font-weight: 800; margin-top: .8em; }
.im-login .lg-doccontent dd { margin: 0 0 .5em 20px; }

/* links (the shared card style makes links small, so restore body size here) */
.im-login .lg-doccontent a { color: var(--accent-dark); font-weight: 600; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.im-login .lg-doccontent a:hover { text-decoration-thickness: 2px; }

/* tables: scroll sideways rather than push the page wide */
.im-login .lg-doccontent table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.im-login .lg-doccontent table td,
.im-login .lg-doccontent table th { padding: 8px 14px; border: 1px solid #D5DDE8; vertical-align: top; text-align: left; }
.im-login .lg-doccontent table thead td,
.im-login .lg-doccontent table th { background: #F6F8FB; font-weight: 800; }

/* images and code */
.im-login .lg-doccontent img { max-width: 100%; height: auto; }
.im-login .lg-doccontent code,
.im-login .lg-doccontent kbd,
.im-login .lg-doccontent tt { font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: .92em; background: #EAF6F3; color: #0B4F45; padding: 2px 6px; border-radius: 6px; }
.im-login .lg-doccontent pre { font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: 14px; line-height: 1.6; background: #F6F8FB; border: 1px solid #D5DDE8; border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; }
.im-login .lg-doccontent pre code { background: none; padding: 0; }
.im-login .lg-doccontent hr { border: 0; border-top: 1px solid #E3EAF3; margin: 24px 0; }
.im-login .lg-doccontent blockquote { margin: 0 0 16px; padding: 4px 16px; border-left: 4px solid #B9CCE8; color: var(--muted); }

/* the little icon labels used in the help text */
.im-login .lg-doccontent span.icon { display: inline-block; padding: 0 7px; background: #FFF6D6; color: #0B2545; border: 1px solid #E8C766; border-radius: 6px; font-weight: 700; line-height: 1.5; }

@media (max-width: 860px) {
  .im-login:has(.lg-card.lg-doc) { grid-template-columns: 1fr; }
  .im-login .lg-card.lg-doc { padding: 24px 18px; }
  .im-login .lg-doccontent h1 { font-size: 24px; }
  .im-login .lg-doccontent h2 { font-size: 20px; }
}