/* ============================================================
   SoftwareCentral Help - the modern frame (docs.html).
   Same palette as the Application Manager guide (AppManagerGuide.css).
   Light by default, dark by the OS setting or the header toggle.
   The topic pages load in the iframe and are not styled by this file.
   ============================================================ */
:root {
    --dcBg: #f5f6fa;
    --dcCard: #ffffff;
    --dcInk: #1c2230;
    --dcSoft: #55607a;
    --dcLine: #e2e6f0;
    --dcHover: #eceef6;
    --dcSel: #e4e8f6;
    --dcAccent: #37426f;
    --dcAccent2: #6b7bb8;
    --dcHeader: linear-gradient(135deg, #37426f 0%, #232a49 62%, #1a2038 100%);
    --dcShadow: 0 18px 40px -20px rgba(20, 27, 55, 0.55);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dcBg: #12151f;
        --dcCard: #1a1f2e;
        --dcInk: #e7eaf3;
        --dcSoft: #a4adc6;
        --dcLine: #2b3350;
        --dcHover: #20263a;
        --dcSel: #262e48;
        --dcAccent: #8b9bd8;
        --dcAccent2: #9aa8e0;
        --dcShadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --dcBg: #12151f;
    --dcCard: #1a1f2e;
    --dcInk: #e7eaf3;
    --dcSoft: #a4adc6;
    --dcLine: #2b3350;
    --dcHover: #20263a;
    --dcSel: #262e48;
    --dcAccent: #8b9bd8;
    --dcAccent2: #9aa8e0;
    --dcShadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--dcBg);
    color: var(--dcInk);
    font-family: 'Segoe UI', Verdana, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
[hidden] { display: none !important; }

.dcShell { height: 100%; display: grid; grid-template-rows: auto 1fr; }

/* ---------- Header ---------- */
.dcHeader {
    background: var(--dcHeader);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 16px;
    min-width: 0;
    position: relative;
    z-index: 3;
}
.dcBrand {
    display: flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none; flex: 0 0 auto;
}
/* The master page's logo, made white the same way the master does it. */
.dcBrand img { height: 36px; width: auto; display: block; filter: brightness(0) invert(1); }
.dcBrand span {
    font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
    padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.dcIconBtn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 8px;
    height: 34px;
    cursor: pointer;
}
.dcIconBtn { width: 34px; font-size: 16px; display: inline-grid; place-items: center; padding: 0; }
.dcIconBtn:hover { background: rgba(255, 255, 255, 0.2); }
.dcIconBtn:focus-visible, .dcBrand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dcMenuBtn { display: none; }
.dcHeaderActions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- Search ---------- */
.dcSearch { position: relative; flex: 1 1 auto; max-width: 560px; margin-inline: auto; min-width: 0; }
.dcSearch input {
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 10px;
    padding: 8px 64px 8px 34px;
    font-size: 14px;
}
.dcSearch input::placeholder { color: rgba(255, 255, 255, 0.72); }
.dcSearch input:focus { outline: none; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.6); }
.dcSearch input::-webkit-search-cancel-button { filter: invert(1); }
.dcSearchIcon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); opacity: 0.8; pointer-events: none; }
.dcSearch kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font: 600 11px 'Segoe UI', sans-serif; color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 5px; padding: 1px 6px;
    pointer-events: none;
}
.dcResults {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: var(--dcCard); color: var(--dcInk);
    border: 1px solid var(--dcLine); border-radius: 10px;
    box-shadow: var(--dcShadow);
    max-height: min(70vh, 520px); overflow-y: auto;
    padding: 4px;
}
.dcResult {
    display: block; width: 100%; text-align: left; border: 0; background: none; color: inherit;
    padding: 8px 10px; border-radius: 7px; cursor: pointer;
}
.dcResult b { display: block; font-weight: 600; font-size: 13.5px; }
.dcResult small { display: block; color: var(--dcSoft); font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcResult:hover, .dcResult.on { background: var(--dcSel); }
.dcResultGroup { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dcSoft); padding: 8px 10px 2px; }
.dcResultEmpty { padding: 10px 12px; color: var(--dcSoft); font-size: 13px; }

/* ---------- Body: sidebar + content ---------- */
.dcBody { display: grid; grid-template-columns: 300px 1fr; min-height: 0; }
.dcSide {
    background: var(--dcCard);
    border-right: 1px solid var(--dcLine);
    display: flex; flex-direction: column; min-height: 0;
}
.dcSideHead {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    color: var(--dcSoft); padding: 14px 18px 8px;
}
.dcTree { overflow-y: auto; padding: 0 8px 20px; font-size: 13.5px; }
.dcTreeNote { padding: 8px 10px; color: var(--dcSoft); }
.dcTree ul { list-style: none; margin: 0; padding: 0; }
.dcTree ul ul { margin: 1px 0 4px 14px; padding-left: 6px; border-left: 1px solid var(--dcLine); }
.dcTree li { margin: 1px 0; }
.dcNode {
    display: flex; align-items: flex-start; gap: 6px; width: 100%;
    border: 0; background: none; color: var(--dcSoft); text-align: left; text-decoration: none;
    padding: 5px 8px; border-radius: 7px; cursor: pointer;
}
.dcNode:hover { background: var(--dcHover); color: var(--dcInk); }
.dcNode:focus-visible { outline: 2px solid var(--dcAccent2); outline-offset: -2px; }
.dcNode.cur { background: var(--dcSel); color: var(--dcInk); font-weight: 600; }
.dcTree > ul > li > .dcNode { color: var(--dcInk); font-weight: 600; }
.dcChev { flex: 0 0 12px; width: 12px; color: var(--dcSoft); transition: transform 0.15s ease; line-height: 1.5; }
.dcChev.none { visibility: hidden; }
li.open > .dcNode .dcChev { transform: rotate(90deg); }
li:not(.open) > ul { display: none; }

.dcMain { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
.dcBar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 20px; border-bottom: 1px solid var(--dcLine); background: var(--dcBg);
    font-size: 13px; color: var(--dcSoft); min-width: 0;
}
.dcCrumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dcCrumbs b { color: var(--dcInk); font-weight: 600; }
.dcCrumbs .sep { margin: 0 6px; opacity: 0.7; }
.dcBarTools { display: flex; gap: 8px; flex: 0 0 auto; }
.dcToolBtn {
    border: 1px solid var(--dcLine); background: var(--dcCard); color: var(--dcInk);
    border-radius: 7px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; text-decoration: none;
}
.dcToolBtn:hover { border-color: var(--dcAccent2); }
.dcFrame { width: 100%; height: 100%; border: 0; display: block; background: #ffffff; }
.dcScrim { display: none; }

/* ---------- Search results page ---------- */
.dcSearchPage { grid-row: 2; overflow-y: auto; padding: 22px 28px 40px; background: var(--dcBg); min-height: 0; }
.dcSearchPage > * { max-width: 860px; }
.dcSearchPage h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.dcSearchSum { color: var(--dcSoft); margin: 0 0 6px; }
.dcSearchWait { color: var(--dcSoft); font-size: 13px; margin: 0 0 6px; font-style: italic; }
.dcSearchPage h2 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dcSoft); margin: 22px 0 8px; font-weight: 600; }
.dcHit {
    display: block; text-decoration: none; color: inherit;
    background: var(--dcCard); border: 1px solid var(--dcLine); border-radius: 10px;
    padding: 10px 14px; margin: 0 0 8px;
}
.dcHit:hover, .dcHit:focus-visible { border-color: var(--dcAccent); background: var(--dcHover); outline: none; }
.dcHit b { display: block; font-weight: 600; font-size: 14.5px; color: var(--dcAccent); }
.dcHit small { display: block; color: var(--dcSoft); font-size: 12px; margin-top: 1px; }
.dcHit p { margin: 5px 0 0; color: var(--dcInk); font-size: 13px; }
.dcHit mark { background: rgba(240, 190, 60, 0.35); color: inherit; border-radius: 3px; padding: 0 1px; }
.dcMore {
    border: 1px solid var(--dcLine); background: var(--dcCard); color: var(--dcInk);
    border-radius: 8px; padding: 6px 14px; cursor: pointer; margin: 2px 0 6px;
}
.dcMore:hover { border-color: var(--dcAccent); }
.dcResult.dcAll {
    position: sticky; bottom: -4px; background: var(--dcCard);
    border-top: 1px solid var(--dcLine); border-radius: 0 0 7px 7px; margin-top: 4px;
    color: var(--dcAccent); font-weight: 600; font-size: 13px;
}
.dcResult.dcAll:hover, .dcResult.dcAll.on { background: var(--dcSel); }

@media (prefers-reduced-motion: reduce) {
    .dcChev { transition: none; }
}

/* ---------- Tablet and phone: the contents become a drawer ---------- */
@media (max-width: 900px) {
    .dcBody { grid-template-columns: 1fr; position: relative; }
    .dcSide {
        position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 86vw);
        z-index: 2; box-shadow: 12px 0 30px -18px rgba(0, 0, 0, 0.6);
        transform: translateX(-102%); transition: transform 0.18s ease;
    }
    .dcShell.drawer .dcSide { transform: none; }
    .dcShell.drawer .dcScrim { display: block; position: absolute; inset: 0; background: rgba(13, 18, 38, 0.45); z-index: 1; }
    .dcMenuBtn { display: inline-grid; }
    .dcBarTools { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .dcSide { transition: none; }
}
@media (max-width: 560px) {
    .dcHeader { gap: 8px; padding: 8px 10px; }
    .dcBrand span { display: none; }
    .dcBrand img { height: 32px; }
    .dcSearch kbd { display: none; }
    .dcSearch input { padding-right: 12px; }
}