/* Amazon Odoo Connector (TM) help centre */
:root {
    --bg: #121614; --bg-soft: #181d1a; --panel: #1b211e; --panel-2: #1f2522; --line: #262d29; --line-2: #2c3430;
    --ink: #eef2ef; --ink-2: #cbd3ce; --muted: #97a29c; --faint: #6f7a74;
    --accent: #a6cf5c; --accent-ink: #12160f; --accent-soft: #1e2a14; --accent-line: #34461f;
    --plum: #d48bc1; --plum-soft: #2a1a26; --plum-line: #4a2b42;
    --note-bg: #16291f; --note-line: #29473a; --note-h: #7ad8b4;
    --warn-bg: #2b2114; --warn-line: #4d3a1d; --warn-h: #f0b867;
    --code-bg: #0e1210;
    --shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
}
:root[data-theme="light"] {
    --bg: #fbfcfa; --bg-soft: #f4f6f2; --panel: #ffffff; --panel-2: #f6f8f4; --line: #e4e8e2; --line-2: #dbe1d8;
    --ink: #141a16; --ink-2: #2e3731; --muted: #5d6862; --faint: #8a948e;
    --accent: #5f8a1f; --accent-ink: #ffffff; --accent-soft: #eef5e2; --accent-line: #cfe3ad;
    --plum: #9d4485; --plum-soft: #f6eaf3; --plum-line: #e3c3da;
    --note-bg: #edf7f1; --note-line: #bfe3cf; --note-h: #157a52;
    --warn-bg: #fdf4e6; --warn-line: #f0d6a8; --warn-h: #9a5b00;
    --code-bg: #f1f3ef;
    --shadow: 0 1px 2px rgba(20, 26, 22, .05), 0 8px 24px rgba(20, 26, 22, .06);
    color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
    margin: 0; background: var(--bg); color: var(--ink-2);
    font: 16px/1.65 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd {
    font: .88em/1.4 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: .08em .4em; color: var(--ink);
}
strong { color: var(--ink); }

/* Header */
.hdr {
    position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; gap: 16px;
    padding: 0 20px; background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.brand .sep { color: var(--faint); font-weight: 400; }
.brand .sub { color: var(--muted); font-weight: 500; }
.search { position: relative; flex: 1; max-width: 460px; margin: 0 auto; }
.search input {
    width: 100%; height: 38px; padding: 0 40px 0 14px; border-radius: 10px; border: 1px solid var(--line-2);
    background: var(--panel); color: var(--ink); font: inherit; font-size: 14.5px; outline: none;
}
.search input:focus { border-color: var(--accent); }
.search kbd { position: absolute; right: 10px; top: 8px; font-size: 12px; color: var(--muted); }
.results {
    position: absolute; top: 44px; left: 0; right: 0; max-height: 60vh; overflow: auto; display: none;
    background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
}
.results.open { display: block; }
.results a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); }
.results a:hover, .results a.sel { background: var(--panel-2); text-decoration: none; }
.results .t { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.results .p { color: var(--muted); font-size: 12.5px; }
.results .e { color: var(--muted); font-size: 13px; padding: 10px; }
.hdr-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel);
    color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
}
.icon-btn svg { width: 18px; height: 18px; }
.btn {
    display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 10px; font-weight: 600;
    font-size: 14.5px; background: var(--ink); color: var(--bg); white-space: nowrap;
}
.btn:hover { text-decoration: none; opacity: .92; }
.menu-btn { display: none; }

/* Layout */
.layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.side {
    position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; padding: 18px 14px 40px;
    border-right: 1px solid var(--line); background: var(--bg);
}
.side .grp { margin: 18px 10px 6px; font-size: 11.5px; letter-spacing: .12em; font-weight: 600; color: var(--faint); }
.side .grp:first-child { margin-top: 4px; }
.side .topic {
    display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; color: var(--ink-2);
    font-weight: 500; font-size: 14.5px; cursor: pointer;
}
.side .topic:hover { background: var(--panel); text-decoration: none; }
.side .topic .n { font: 600 11.5px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--faint); }
.side .topic.on { background: var(--accent-soft); color: var(--ink); }
.side .topic.on .n { color: var(--accent); }
.side .subs { display: none; margin: 2px 0 8px 22px; padding-left: 10px; border-left: 1px solid var(--line); }
.side .topic.on + .subs { display: block; }
.side .subs a { display: block; padding: 3px 8px; font-size: 13.5px; color: var(--muted); border-radius: 6px; }
.side .subs a:hover { color: var(--ink); text-decoration: none; }
.side .subs a.on { color: var(--accent); }

main { min-width: 0; padding: 40px 56px 80px; max-width: 1060px; }

/* Home */
.eyebrow { font-size: 12.5px; letter-spacing: .14em; font-weight: 600; color: var(--accent); }
.home h1 { font-size: clamp(34px, 5vw, 51px); line-height: 1.08; color: var(--ink); font-weight: 600; margin: 10px 0 14px; letter-spacing: -.01em; }
.home .lead { font-size: 19px; color: var(--muted); max-width: 720px; margin: 0 0 28px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; margin-bottom: 56px; }
.card {
    display: block; padding: 16px 16px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
    color: var(--ink-2); transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent-line); text-decoration: none; transform: translateY(-1px); }
.card .n { font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--accent); }
.card .t { display: block; color: var(--ink); font-weight: 600; font-size: 16.5px; margin: 10px 0 6px; }
.card .d { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Topic */
.topic-sec { padding-top: 26px; margin-top: 30px; border-top: 1px solid var(--line); }
.topic-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.topic-head .num {
    font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--accent-ink); background: var(--accent);
    border-radius: 7px; padding: 6px 8px;
}
.topic-head .tag { font-size: 12.5px; letter-spacing: .14em; font-weight: 600; color: var(--faint); }
.topic-sec > h1 { font-size: 38px; line-height: 1.15; color: var(--ink); font-weight: 600; margin: 8px 0 6px; letter-spacing: -.01em; }
.read { font-size: 13.5px; color: var(--faint); margin-bottom: 16px; }
.topic-sec > .intro { font-size: 18px; color: var(--muted); margin: 0 0 8px; }
h2 { font-size: 26px; color: var(--ink); font-weight: 600; margin: 42px 0 12px; line-height: 1.25; }
h3 { font-size: 19px; color: var(--ink); font-weight: 600; margin: 28px 0 8px; }
h2 .anchor, h3 .anchor { opacity: 0; margin-left: 8px; color: var(--faint); font-weight: 400; }
h2:hover .anchor, h3:hover .anchor { opacity: 1; }
p { margin: 0 0 14px; }
ul, ol { padding-left: 22px; margin: 0 0 16px; }
li { margin: 4px 0; }

/* Tables */
.tbl { overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th {
    text-align: left; background: var(--panel-2); color: var(--muted); font-size: 12.5px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line-2);
}
td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
tr:first-child td { border-top: 0; }
td:first-child { color: var(--ink); font-weight: 500; }
td.opt { white-space: nowrap; }

/* Steps */
ol.steps { list-style: none; padding: 0; counter-reset: s; margin: 8px 0 20px; }
ol.steps > li { counter-increment: s; position: relative; padding: 2px 0 10px 44px; margin: 0; }
ol.steps > li::before {
    content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; font: 600 13px/1 "JetBrains Mono", ui-monospace, monospace;
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
}
ol.steps > li::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 2px; width: 1px; background: var(--line); }
ol.steps > li:last-child::after { display: none; }

/* Callouts */
.note, .warn { border-radius: 12px; padding: 14px 18px 4px; margin: 10px 0 22px; border: 1px solid; }
.note { background: var(--note-bg); border-color: var(--note-line); }
.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.note .h, .warn .h { font-size: 12px; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.note .h { color: var(--note-h); }
.warn .h { color: var(--warn-h); }

/* Figures, pills */
figure { margin: 10px 0 26px; }
figure img { width: 100%; border-radius: 12px; border: 1px solid var(--line-2); display: block; box-shadow: var(--shadow); }
figcaption { font-size: 13.5px; color: var(--faint); margin-top: 8px; }
.pill {
    display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
    background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); white-space: nowrap;
}
.pill.plum { background: var(--plum-soft); color: var(--plum); border-color: var(--plum-line); }
.path { color: var(--ink); font-weight: 500; }

.foot { margin-top: 70px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }

/* Phone and tablet */
@media (max-width: 920px) {
    .layout { grid-template-columns: 1fr; }
    .side {
        position: fixed; top: 64px; left: 0; bottom: 0; width: 300px; height: auto; z-index: 15;
        transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow);
    }
    body.nav-open .side { transform: none; }
    .menu-btn { display: grid; }
    main { padding: 28px 16px 60px; }
    .brand .sep, .brand .sub, .btn { display: none; }
    .topic-sec > h1 { font-size: 30px; }
    h2 { font-size: 23px; }
}
@media (max-width: 560px) {
    .hdr { gap: 8px; padding: 0 12px; }
    .brand span:not(.sep):not(.sub) { display: none; }
    .search kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card { transition: none; } }

/* Print and PDF: light, no header or sidebar, each topic on a new page */
@media print {
    :root, :root[data-theme] {
        --bg: #fff; --bg-soft: #fff; --panel: #fff; --panel-2: #f4f6f2; --line: #dfe4dc; --line-2: #d3d9d0;
        --ink: #111; --ink-2: #222; --muted: #444; --faint: #666;
        --accent: #4d7c0f; --accent-ink: #fff; --accent-soft: #eef5e2; --accent-line: #cfe3ad;
        --note-bg: #eef7f1; --note-line: #bfe3cf; --note-h: #157a52; --warn-bg: #fdf4e6; --warn-line: #f0d6a8; --warn-h: #9a5b00;
        --code-bg: #f3f4f1; --shadow: none;
    }
    @page { size: A4; margin: 16mm 14mm; }
    body { font-size: 11pt; background: #fff; }
    .hdr, .side, .anchor, .search, .cards { display: none !important; }
    .layout { display: block; }
    main { padding: 0; max-width: none; }
    .home h1 { font-size: 30pt; margin-top: 60mm; }
    .home .lead { font-size: 13pt; }
    .home .lead:not(.print-toc) { display: none !important; }
    .topic-sec { break-before: page; border-top: 0; margin-top: 0; padding-top: 0; }
    h2, h3 { break-after: avoid; }
    .tbl, figure, .note, .warn, ol.steps > li, tr { break-inside: avoid; }
    figure img { max-height: 120mm; width: auto; max-width: 100%; }
    a { color: inherit; }
    .print-toc { display: block !important; }
}
.print-toc { display: none; }
.print-toc ol { columns: 2; font-size: 11pt; }