/* ==========================================================================
   THE KNOWLEDGE BASE

   Two things this file is shaped around, both of them SEO rather than taste:

   1. An article page is read by strangers arriving cold from a search result,
      not by the owner of the account. So it is the one part of the suite that
      is a reading page first -- one column, a real measure, generous leading --
      rather than a dashboard of cards.

   2. Layout stability is a ranking signal. Every illustration therefore has
      its aspect ratio declared in CSS, so the box is the right size before the
      SVG paints and nothing below it jumps.

   Colour goes through Core's role tokens without exception, and text uses the
   ink tokens, so a sixth theme cannot push any of this under AA.
   ========================================================================== */

/* --- the page around the article ------------------------------------------
   The headline and the breadcrumb are printed by the template, outside
   .ldk-article, so they need the same measure or they sit wider than the
   words underneath them and the column stops looking like a column. */
.ldk-page > .ldk-crumbs,
.ldk-page-title {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.ldk-page-title {
    font-size: 27px;
    line-height: 1.4;
    margin: 2px 0 14px;
}
@media (max-width: 640px) {
    .ldk-page-title { font-size: 23px; line-height: 1.42; }
}

/* --- the article shell ---------------------------------------------------- */
.ldk-article {
    max-width: 720px;   /* ~75 characters of Thai at 17px: past this, the eye
                           loses the start of the next line */
    margin: 0 auto;
    padding: 4px 0 8px;
}

.ldk-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ldc-text-muted);
    margin-bottom: 10px;
}
.ldk-crumbs a { color: var(--ldc-link); text-decoration: none; }
.ldk-crumbs a:hover { text-decoration: underline; }
.ldk-crumbs span { color: var(--ldc-label); }

.ldk-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ldc-text-muted);
    margin-bottom: 16px;
}

/* --- the short-answer box -------------------------------------------------
   First in the HTML as well as first on the page, because that is the part a
   search engine lifts for a featured snippet. The left rule is a border, not
   text, so the brand red is allowed to be itself here. */
.ldk-answer {
    background: var(--ldc-surface-accent);
    border-left: 5px solid var(--ldc-red);
    border-radius: var(--ldc-radius-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.ldk-answer-label {
    font-family: var(--ldc-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ldc-accent-ink);
    margin-bottom: 4px;
}
.ldk-answer p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ldc-text);
}

/* Shown to an English reader on an article that has no English version yet.
   Quieter than a warning, louder than nothing: the point is that they know
   why the page is in Thai, not that they feel something has gone wrong. */
.ldk-onlylang {
    background: var(--ldc-surface-cool);
    border-left: 4px solid var(--ldc-teal);
    border-radius: var(--ldc-radius-sm);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ldc-text-soft);
}

/* --- illustrations --------------------------------------------------------
   aspect-ratio matches the 320x180 viewBox every drawing uses, so the space is
   reserved before the SVG paints and the text below never shifts. */
.ldk-art {
    margin: 0 0 20px;
    padding: 14px;
    background: var(--ldc-surface-soft);
    border: 1px solid var(--ldc-border);
    border-radius: var(--ldc-radius);
}
.ldk-art.is-small {
    margin: 0 0 12px;
    padding: 10px;
    background: var(--ldc-surface-cool);
}
.ldk-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 180;
}

/* The drawing palette. Fills and strokes only -- none of these is ever a
   colour for text, which is what keeps the contrast sweep at zero. */
.ldk-fill-soft   { fill: var(--ldc-surface-accent); stroke: none; stroke-dasharray: none; }
.ldk-fill-accent { fill: var(--ldc-orange); stroke: none; opacity: .85; }
.ldk-fill-cool   { fill: var(--ldc-teal-soft); stroke: none; opacity: .8; }
.ldk-fill-ok     { fill: var(--ldc-ok); stroke: none; opacity: .7; }
.ldk-line {
    fill: none;
    stroke: var(--ldc-ink);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
}
.ldk-data {
    fill: none;
    stroke: var(--ldc-red);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
}
/* Named .ldk-guide, not .ldk-grid, and the distinction is load-bearing:
   stroke-dasharray is an INHERITED property, and the index lays its tiles out
   in a container that would have to share the name. Every drawing on the index
   inherited the dashes off the layout box, so a solid outline came out looking
   like a guide line. The two names are now separate, and the solid classes say
   "none" out loud so nothing above them can dash them again. */
.ldk-guide {
    fill: none;
    stroke: var(--ldc-border-strong);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 5 6;
}
.ldk-dot { fill: var(--ldc-red); stroke: none; }
.ldk-dot.is-last { fill: var(--ldc-orange); stroke: var(--ldc-red); stroke-width: 2.4; }

/* --- table of contents ---------------------------------------------------- */
.ldk-toc {
    background: var(--ldc-card-bg);
    border: 1px solid var(--ldc-border);
    border-radius: var(--ldc-radius);
    padding: 14px 18px;
    margin-bottom: 22px;
}
.ldk-toc-title {
    font-family: var(--ldc-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--ldc-label);
    margin-bottom: 6px;
}
.ldk-toc ol {
    margin: 0;
    padding-left: 20px;
    counter-reset: none;
}
.ldk-toc li { margin: 5px 0; font-size: 14px; line-height: 1.6; }
.ldk-toc a { color: var(--ldc-link); text-decoration: none; }
.ldk-toc a:hover { text-decoration: underline; }

/* --- the body ------------------------------------------------------------- */
.ldk-body { font-size: 17px; line-height: 1.9; color: var(--ldc-text); }
.ldk-body > *:first-child { margin-top: 0; }

.ldk-body h2 {
    font-family: var(--ldc-font-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ldc-red-ink);
    margin: 32px 0 10px;
    /* scroll-margin so a jump-to link from a search result does not park the
       heading underneath the fixed top bar */
    scroll-margin-top: calc(var(--ldc-topbar-h) + 12px);
}
.ldk-body h3 {
    font-family: var(--ldc-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ldc-accent-ink);
    margin: 24px 0 8px;
    scroll-margin-top: calc(var(--ldc-topbar-h) + 12px);
}
.ldk-body p { margin: 0 0 16px; }
.ldk-body ul, .ldk-body ol { margin: 0 0 16px; padding-left: 24px; }
.ldk-body li { margin: 6px 0; }
.ldk-body strong { font-weight: 700; }
.ldk-body a { color: var(--ldc-link); }

.ldk-body blockquote {
    margin: 0 0 18px;
    padding: 12px 16px;
    background: var(--ldc-surface-soft);
    border-left: 4px solid var(--ldc-border-strong);
    border-radius: var(--ldc-radius-sm);
    font-size: 16px;
}
.ldk-body blockquote p:last-child { margin-bottom: 0; }

/* An evidence badge inside prose, same vocabulary as the supplement module so
   a reader who has seen one has seen both. */
.ldk-body .ldk-ev {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ldc-surface-soft);
    color: var(--ldc-text);
    white-space: nowrap;
}
.ldk-body .ldk-ev.is-strong   { background: var(--ldc-surface-ok); }
.ldk-body .ldk-ev.is-moderate { background: var(--ldc-surface-cool); }
.ldk-body .ldk-ev.is-weak     { background: var(--ldc-surface-warn); }
.ldk-body .ldk-ev.is-none     { background: var(--ldc-surface-alert); }

/* Tables in an article scroll rather than push the page sideways. */
.ldk-body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 18px; }
.ldk-body th, .ldk-body td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ldc-border);
    vertical-align: top;
}
.ldk-body th { font-weight: 700; color: var(--ldc-label); }

/* --- the tool call-out ----------------------------------------------------
   Every article ends at the part of the suite it is about; that internal link
   is worth as much to the reader as it is to the crawler. */
.ldk-tool {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--ldc-surface-accent);
    border: 1px solid var(--ldc-border-strong);
    border-radius: var(--ldc-radius);
    padding: 16px 18px;
    margin: 26px 0 20px;
}
.ldk-tool > div { flex: 1 1 220px; min-width: 0; }
.ldk-tool strong { font-family: var(--ldc-font-display); font-size: 16px; display: block; }
.ldk-tool p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--ldc-text-soft); }
.ldk-tool .ldc-btn { flex: 0 0 auto; }

/* --- the disclaimer ------------------------------------------------------- */
.ldk-disclaimer {
    background: var(--ldc-surface-soft);
    border: 1px dashed var(--ldc-border-strong);
    border-radius: var(--ldc-radius);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ldc-text-soft);
    margin-bottom: 24px;
}
.ldk-disclaimer strong { display: block; color: var(--ldc-red-ink); margin-bottom: 4px; font-size: 14px; }

/* --- read next ------------------------------------------------------------ */
.ldk-related h2 {
    font-family: var(--ldc-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ldc-red-ink);
    margin: 0 0 10px;
}
.ldk-related ul { list-style: none; margin: 0; padding: 0; }
.ldk-related li {
    padding: 12px 14px;
    background: var(--ldc-card-bg);
    border: 1px solid var(--ldc-border);
    border-radius: var(--ldc-radius-sm);
    margin-bottom: 8px;
}
.ldk-related a {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: var(--ldc-link);
    text-decoration: none;
    line-height: 1.6;
}
.ldk-related a:hover { text-decoration: underline; }
.ldk-related span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ldc-text-muted);
}

/* --- the index ------------------------------------------------------------ */
.ldk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.ldk-tile { padding: 0; overflow: hidden; }
.ldk-tile-link {
    display: block;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.ldk-tile-link:hover .ldk-tile-title { text-decoration: underline; }
.ldk-tile-link:focus-visible { outline: 3px solid var(--ldc-teal); outline-offset: -3px; }
.ldk-tile .ldk-art { margin-bottom: 10px; }
.ldk-tile-title {
    font-family: var(--ldc-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--ldc-link);
    margin: 0 0 6px;
}
.ldk-tile-desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ldc-text-soft);
}
.ldk-tile-meta { font-size: 12px; color: var(--ldc-text-muted); }

/* --- narrow screens -------------------------------------------------------
   The article gets its side padding back, because on a phone the page shell
   is edge to edge and 17px text against the glass is unreadable. */
@media (max-width: 640px) {
    .ldk-article { padding-left: 2px; padding-right: 2px; }
    .ldk-body { font-size: 16px; line-height: 1.85; }
    .ldk-body h2 { font-size: 19px; margin-top: 26px; }
    .ldk-body h3 { font-size: 16px; }
    .ldk-answer p { font-size: 15px; }
    .ldk-tool { padding: 14px; }
    .ldk-tool .ldc-btn { width: 100%; text-align: center; }
    .ldk-grid { grid-template-columns: 1fr; }
    /* On mobile the top bar is one row, so the jump-to offset shrinks with it;
       the token already changes at the breakpoint, this just keeps the two
       heading rules honest about which one they are reading. */
}

/* Someone printing an article does not want the call-out or the contents. */
@media print {
    .ldk-tool, .ldk-toc, .ldk-related, .ldk-crumbs { display: none; }
    .ldk-article { max-width: none; }
}