/* =============================================================================
   hn-doc.css — the house style for CUSTOMER-HELP pages.

   Why this file exists (2026-08-27). Every public page carried its own <style>
   block and its own guesses. Measured across 26 view templates on that day:
   EIGHT different content-column widths (760, 820, 840, 860, 880, 900, 960,
   980), body type in Open Sans / Outfit / Arial / Courier New / browser
   default, and code blocks in Menlo / monospace / Courier New at 12, 12.5 and
   14px. The owner's word for the result was "nồi lẩu thập cẩm". So: the
   decisions live here once, and a help page stops re-deciding them.

   The values are LIFTED FROM /connect, not re-invented. That page is the most
   recent and the only one whose choices were reasoned out and written down (its
   own CSS explains why the measure is 860px and why the command block has to
   force its own colours). Owner picked it as the house look on 2026-08-27.

   SCOPING — read before adding anything. Every rule is nested under
   `.hn-doc`. Nothing here can touch a page that has not opted in by wrapping
   its content in that class. That is deliberate: the marketing pages are live
   sales pages with no tests, and they must not move because a help page did.
   Never add a bare element selector at the top level of this file.

   ORDER — this file is linked AFTER bootstrap and style.css so it wins on
   equal specificity. Where it still has to use !important the reason is
   written at the rule.
   ========================================================================== */

/* --- the page shell ------------------------------------------------------ */
.hn-doc {
    --hn-red: #DE1B32;
    --hn-ink: #0F1B2D;
    --hn-ink-deep: #0E1A2B;
    --hn-paper: #F2F4F6;
    --hn-paper-warm: #F6F5F3;
    --hn-card: #FFFFFF;
    --hn-slate: #5A6B7E;
    --hn-line: #D8DEE6;
    --hn-pass: #1E9E63;
    --hn-muted: #AAB8C8;
    font-family: 'Open Sans', sans-serif;
    background: var(--hn-paper);
    color: var(--hn-ink);
    line-height: 1.62;
    font-size: 16px;
    /* Pull up under the site header the same way /connect does, so the band
       meets the nav with no white seam. */
    margin-top: -64px;
    margin-bottom: -20px;
    padding-bottom: 56px;
}
@media (max-width: 600px) { .hn-doc { margin-top: -32px; } }

.hn-doc h1,
.hn-doc h2,
.hn-doc h3 {
    font-family: 'Oswald', sans-serif;
    line-height: 1.12;
    margin: 0;
    letter-spacing: 0;
    color: var(--hn-ink);
}

/* --- layout -------------------------------------------------------------- */
.hn-doc .hn-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 34px;
}
/* The reading measure. 860px at 16px is ~80 characters a line, inside the
   comfortable 45-90 range. Do NOT widen this to make a page "look modern" —
   the /connect notes record that widening the text made reading worse; what
   large sites run full-width is the BACKGROUND, not the prose. */
.hn-doc .hn-read {
    max-width: 860px;
    margin: 0 auto;
}
/* For the article layout: 1080 - 68 padding - 300 rail - 44 gap - 68 card
   padding leaves a ~600px text column, about 72 characters a line. At the full
   1360px shell the same layout gives 880px, which is ~105 characters — past the
   point where the eye loses the line. */
.hn-doc .hn-wrap.is-narrow { max-width: 1080px; }

/* --- hero ---------------------------------------------------------------- */
.hn-doc .hn-hero {
    background:
        radial-gradient(760px 300px at 50% -28%, rgba(222,27,50,.14), transparent 68%),
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        var(--hn-ink);
    background-size: auto, 44px 44px, 44px 44px, auto;
    color: #fff;
    text-align: center;
    padding: 104px 0 84px;
}
.hn-doc .hn-hero h1 {
    font-size: clamp(31px, 4.4vw, 54px);
    max-width: 15em;
    margin: 14px auto 0;
    font-weight: 700;
    color: #fff;
}
.hn-doc .hn-hero p {
    max-width: 34em;
    margin: 16px auto 0;
    color: var(--hn-muted);
    font-size: 18px;
}
/* A directory page (the help index) reads left-aligned; a single-topic page
   reads centred. Same band, different alignment. */
.hn-doc .hn-hero.is-left { text-align: left; padding: 100px 0 46px; }
.hn-doc .hn-hero.is-left h1 { margin-left: 0; margin-right: 0; max-width: 18em; }
.hn-doc .hn-hero.is-left p { margin-left: 0; margin-right: 0; max-width: 40em; }
.hn-doc .hn-kicker {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #F5566B;
    font-weight: 700;
}

/* --- sections and cards -------------------------------------------------- */
.hn-doc .hn-section { padding: 56px 0; }
.hn-doc .hn-section.is-band-light { background: var(--hn-card); }
.hn-doc .hn-section.is-band-paper { background: var(--hn-paper); }
.hn-doc .hn-section h2 { font-size: clamp(26px, 3.2vw, 38px); }
.hn-doc .hn-section-intro {
    margin: 14px auto 0;
    color: var(--hn-slate);
    font-size: 19px;
    max-width: 38em;
}
.hn-doc .hn-panel {
    background: var(--hn-card);
    border: 1px solid var(--hn-line);
    border-radius: 8px;
    padding: 30px;
}
/* Lifts a strip of small point-cards over the hero edge, as on /connect. Only
   for a row of short items — never wrap a whole page section in this. */
.hn-doc .hn-raise {
    margin-top: -46px;
    position: relative;
    z-index: 2;
}
.hn-doc .hn-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.hn-doc .hn-point {
    background: var(--hn-card);
    border: 1px solid var(--hn-line);
    border-radius: 8px;
    padding: 20px 22px;
    box-shadow: 0 14px 44px rgba(15,27,45,.10);
}
.hn-doc .hn-point b {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    line-height: 1.2;
}
.hn-doc .hn-point span {
    display: block;
    margin-top: 7px;
    color: var(--hn-slate);
    font-size: 14.5px;
}
@media (max-width: 760px) {
    .hn-doc .hn-points { grid-template-columns: 1fr; }
    .hn-doc .hn-raise { margin-top: -30px; }
}

/* An illustration sits in its own light frame ON the band — it does not need a
   card around it as well. */
.hn-doc .hn-figure {
    border: 1px solid var(--hn-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--hn-card);
}
.hn-doc .hn-panel h2 { font-size: 30px; margin-bottom: 18px; }
.hn-doc .hn-panel h3 { font-size: 21px; }
.hn-doc .hn-panel p { margin: 10px 0 0; }
.hn-doc .hn-panel a { color: var(--hn-red); }
.hn-doc .hn-lede { font-size: 18px; color: var(--hn-slate); }
.hn-doc .hn-note { color: var(--hn-slate); font-size: 14.5px; }
.hn-doc .hn-divider { border: none; border-top: 1px solid var(--hn-line); margin: 34px 0; }

/* --- numbered step timeline ---------------------------------------------- */
.hn-doc .hn-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: hn-step;
}
.hn-doc .hn-steps > li {
    position: relative;
    counter-increment: hn-step;
    padding: 0 0 26px 54px;
    border-left: 1px solid var(--hn-line);
    margin: 0;
}
.hn-doc .hn-steps > li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}
.hn-doc .hn-steps > li::before {
    content: counter(hn-step);
    position: absolute;
    left: -17px;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--hn-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
}
.hn-doc .hn-steps b { display: block; color: var(--hn-ink); font-size: 16px; }
.hn-doc .hn-steps p { margin: 6px 0 0; color: var(--hn-slate); max-width: 45em; }

/* --- question / answer list (troubleshooting, FAQ) ----------------------- */
.hn-doc .hn-qa { margin: 0; }
.hn-doc .hn-qa dt {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 26px;
    color: var(--hn-ink);
}
.hn-doc .hn-qa dt:first-child { margin-top: 0; }
.hn-doc .hn-qa dd {
    margin: 8px 0 0;
    color: var(--hn-slate);
    max-width: 45em;
}

/* --- inline key / value chip --------------------------------------------- */
.hn-doc .hn-key {
    font-family: monospace;
    color: var(--hn-ink);
    background: var(--hn-paper);
    border: 1px solid var(--hn-line);
    border-radius: 6px;
    padding: 1px 5px;
    white-space: nowrap;
}

/* --- callouts ------------------------------------------------------------ */
.hn-doc .hn-callout {
    display: block;
    margin: 14px 0;
    padding: 13px 15px;
    border-left: 3px solid var(--hn-line);
    border-radius: 4px;
    background: var(--hn-paper-warm);
    color: var(--hn-ink);
    font-size: 15px;
}
.hn-doc .hn-callout.is-warning {
    border-left-color: var(--hn-red);
    background: #FDF3F2;
}
.hn-doc .hn-callout.is-good {
    border-left-color: var(--hn-pass);
    background: #F1F8F4;
}

/* --- the dark command block ---------------------------------------------- */
.hn-doc .hn-command {
    margin-top: 12px;
    background: var(--hn-ink-deep);
    border: 1px solid #26364B;
    border-radius: 8px;
    overflow: hidden;
    /* A command is not prose: it wants room to stop wrapping, not a reading
       measure. Full width of its container. */
    max-width: 100%;
}
.hn-doc .hn-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #C8D4E2;
    font-family: monospace;
    font-size: 12px;
}
.hn-doc .hn-copy {
    appearance: none;
    border: none;
    border-radius: 6px;
    background: var(--hn-red);
    color: #fff;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    padding: 8px 13px;
}
.hn-doc .hn-copy:hover,
.hn-doc .hn-copy:focus-visible {
    outline: 3px solid rgba(222,27,50,.25);
    outline-offset: 2px;
    box-shadow: 0 2px 12px rgba(222,27,50,.28);
}
/* !important on the colours: bootstrap.css styles `pre` as dark-grey-on-pale-
   grey and it leaks under this block, which renders the command light-on-light
   and unreadable. That happened on /support/add-machine on 2026-08-27. */
.hn-doc .hn-command pre {
    margin: 0 !important;
    padding: 17px !important;
    overflow-x: auto;
    background: var(--hn-ink-deep) !important;
    color: #F4F7FB !important;
    font-family: Menlo, Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.5;
    border: 0 !important;
    border-radius: 0 !important;
}
/* Break commands at SPACES, never inside a word — the global code styles set
   word-break: break-all, which chopped "https" from "://hiteknova.com/…" on
   /connect. A command that looks cut in half looks broken, and a customer who
   doubts the line will not paste it. */
.hn-doc .hn-command pre,
.hn-doc .hn-command pre code {
    word-break: normal !important;
    overflow-wrap: normal !important;
}
.hn-doc .hn-command pre code {
    white-space: pre-wrap !important;
    background: transparent !important;
    color: #F4F7FB !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: inherit;
    font-size: inherit;
    text-shadow: none;
}
.hn-doc .hn-copy-status {
    min-height: 20px;
    margin-top: 8px;
    color: var(--hn-pass);
    font-size: 13.5px;
}

/* --- "what is this?" expander -------------------------------------------- */
.hn-doc .hn-what { max-width: 720px; margin-top: 10px; font-size: 14px; }
.hn-doc .hn-what > summary {
    cursor: pointer;
    color: var(--hn-red);
    font-family: 'Oswald', sans-serif;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hn-doc .hn-what > summary::-webkit-details-marker { display: none; }
.hn-doc .hn-what > summary::after { content: "\002B"; font-size: 16px; }
.hn-doc .hn-what[open] > summary::after { content: "\2212"; }
.hn-doc .hn-what p { margin: 9px 0 0; color: var(--hn-slate); line-height: 1.55; }

/* `hidden` carries only the browser default display:none, so any class rule
   with a display would silently beat it. Make it win outright. */
.hn-doc [hidden] { display: none !important; }

/* --- narrow screens ------------------------------------------------------ */
@media (max-width: 600px) {
    .hn-doc .hn-wrap { padding: 0 18px; }
    .hn-doc .hn-panel { padding: 22px 18px; }
    .hn-doc .hn-steps > li { padding-left: 40px; }
    .hn-doc .hn-steps > li::before { left: -15px; width: 30px; height: 30px; font-size: 14px; }
}

/* --- buttons ------------------------------------------------------------- */
/* !important on colour and underline: the site's global link styles otherwise
   repaint an <a> that is acting as a button. */
.hn-doc .hn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--hn-red);
    background: var(--hn-red);
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    cursor: pointer;
}
.hn-doc .hn-button:hover,
.hn-doc .hn-button:focus-visible {
    outline: 3px solid rgba(222,27,50,.22);
    outline-offset: 2px;
    box-shadow: 0 2px 12px rgba(222,27,50,.28);
}
.hn-doc .hn-button.is-secondary {
    background: #fff;
    color: var(--hn-red) !important;
}
.hn-doc .hn-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

/* --- OS / topic tabs ----------------------------------------------------- */
.hn-doc .hn-tabs { margin-top: 28px; }
.hn-doc .hn-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--hn-line);
    padding-bottom: 8px;
}
.hn-doc .hn-tab {
    appearance: none;
    border: 1px solid var(--hn-line);
    background: #fff;
    color: var(--hn-ink);
    border-radius: 8px;
    padding: 10px 18px;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    cursor: pointer;
}
.hn-doc .hn-tab:hover,
.hn-doc .hn-tab:focus-visible {
    border-color: var(--hn-red);
    outline: 3px solid rgba(222,27,50,.18);
    outline-offset: 2px;
}
.hn-doc .hn-tab.is-active,
.hn-doc .hn-tab[aria-selected="true"] {
    background: var(--hn-red);
    border-color: var(--hn-red);
    color: #fff;
    box-shadow: 0 2px 12px rgba(222,27,50,.28);
}
.hn-doc .hn-tabs .hn-panel { margin-top: 24px; }
.hn-doc .hn-panel[hidden] { display: none; }

.hn-doc .hn-success {
    color: var(--hn-pass);
    font-weight: 600;
}

/* --- compact dark header (article pages, no full hero) ------------------- */
.hn-doc .hn-top {
    background: var(--hn-ink);
    color: #fff;
    padding: 96px 0 36px;
}
.hn-doc .hn-top h1 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 700;
    margin-top: 8px;
    color: #fff;
}
.hn-doc .hn-crumb { font-size: 13px; color: #8FA1B5; }
.hn-doc .hn-crumb a { color: #AAB8C8; text-decoration: none; }
.hn-doc .hn-crumb a:hover { color: #fff; text-decoration: underline; }

/* --- search box (help index) --------------------------------------------- */
.hn-doc .hn-search { margin-top: 24px; }
.hn-doc .hn-search input {
    width: 100%;
    max-width: 520px;
    padding: 13px 16px;
    border: none;
    border-radius: 10px;
    font: inherit;
    font-size: 15.5px;
    box-sizing: border-box;
}

/* --- article directory (help index) -------------------------------------- */
.hn-doc .hn-group { margin-bottom: 34px; }
.hn-doc .hn-group h2 {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hn-slate);
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hn-line);
}
.hn-doc .hn-links { list-style: none; margin: 0; padding: 0; }
.hn-doc .hn-links li { border-bottom: 1px solid var(--hn-line); }
.hn-doc .hn-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 4px;
    color: var(--hn-ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}
.hn-doc .hn-links a:hover { color: var(--hn-red); }
.hn-doc .hn-arrow { color: var(--hn-red); flex: none; font-family: 'Oswald', sans-serif; }
.hn-doc .hn-empty { display: none; padding: 24px 4px; color: var(--hn-slate); font-size: 15px; }

/* --- article body + related rail ----------------------------------------- */
.hn-doc .hn-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: start;
}
@media (max-width: 840px) { .hn-doc .hn-layout { grid-template-columns: 1fr; } }
/* NO CARD. A card says "this is set apart from what surrounds it" — the article
   body IS the page, so a card around it emphasises nothing and leaves a stepped
   white edge hanging off the header band. Cards are for a row of small items
   (.hn-point) or a genuinely separate block (.hn-cta). Prose sits on the band. */
.hn-doc .hn-article {
    padding-top: 6px;
}
.hn-doc .hn-article p { margin: 0 0 17px; font-size: 17px; color: #22344A; }
.hn-doc .hn-article p:last-child { margin-bottom: 0; }
.hn-doc .hn-article ul,
.hn-doc .hn-article ol { margin: 0 0 15px; padding-left: 22px; }
.hn-doc .hn-article li { margin: 7px 0; font-size: 17px; color: #22344A; }
.hn-doc .hn-article a { color: var(--hn-red); text-decoration: underline; }
.hn-doc .hn-article strong { color: var(--hn-ink); }

.hn-doc .hn-related {
    position: sticky;
    top: 22px;
    padding-left: 34px;
    border-left: 1px solid var(--hn-line);
}
@media (max-width: 840px) { .hn-doc .hn-related { padding-left: 0; border-left: 0; } }
@media (max-width: 840px) { .hn-doc .hn-related { position: static; margin-top: 26px; } }
.hn-doc .hn-related h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hn-slate);
    font-weight: 600;
}
.hn-doc .hn-related ul { list-style: none; margin: 12px 0 0; padding: 0; }
.hn-doc .hn-related li + li { border-top: 1px solid var(--hn-line); }
.hn-doc .hn-related a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 2px;
    color: var(--hn-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15.5px;
}
.hn-doc .hn-related a:hover { color: var(--hn-red); }

/* --- closing call to action ---------------------------------------------- */
.hn-doc .hn-cta {
    margin: 26px 0 0;
    background: var(--hn-ink);
    border-radius: 14px;
    padding: 28px 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.hn-doc .hn-cta div { flex: 1 1 280px; }
.hn-doc .hn-cta h3 { color: #fff; font-size: 20px; }
.hn-doc .hn-cta p { color: var(--hn-muted); font-size: 14.5px; margin: 6px 0 0; }
.hn-doc .hn-cta .hn-button { flex: none; }

/* --- specification tables ------------------------------------------------ */
.hn-doc .hn-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 0;
    font-size: 15.5px;
}
.hn-doc .hn-table th,
.hn-doc .hn-table td {
    padding: 12px;
    border-bottom: 1px solid var(--hn-line);
    text-align: left;
}
.hn-doc .hn-table th {
    background: var(--hn-paper);
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: var(--hn-ink);
}
.hn-doc .hn-table td { color: var(--hn-slate); }
.hn-doc .hn-table td:first-child { color: var(--hn-ink); }
/* A table is the one thing that may not shrink to fit — let it scroll rather
   than crush the columns. */
.hn-doc .hn-table-scroll { overflow-x: auto; }