/* ===========================================================
   Cittopia Docs — shared shell styles (flexbox-based)
   Used by every page under /docs/.
   =========================================================== */

:root {
    --doc-text:        #1a2233;
    --doc-text-soft:   #5b6b78;
    --doc-text-faint:  #8997a3;
    --doc-bg:          #ffffff;
    --doc-bg-soft:     #f7f9fb;
    --doc-bg-side:     #fbfcfd;
    --doc-border:      #e6ebf0;
    --doc-border-strong: #d1d8df;
    --doc-accent:      #2ca58d;
    --doc-accent-soft: rgba(44,165,141,0.08);
    --doc-accent-strong: #1f8773;
    --doc-warm:        #d2222d;
    --doc-link:        #1f8773;
    --doc-callout-info-bg:    #f0f7ff;
    --doc-callout-info-bd:    #c8defb;
    --doc-callout-tip-bg:     #effaf3;
    --doc-callout-tip-bd:     #c1ead0;
    --doc-callout-warn-bg:    #fff8e6;
    --doc-callout-warn-bd:    #f5d987;
    --doc-callout-quote-bg:   #fbf6f0;
    --doc-callout-quote-bd:   #ecd9b6;
    --shadow-card:     0 1px 2px rgba(20,28,40,0.04), 0 4px 16px rgba(20,28,40,0.05);
    --topbar-h:        56px;
    --side-w:          280px;
    --rail-w:          240px;
    --content-max:     780px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --doc-text: #e6ecf2; --doc-text-soft: #a3b0bc; --doc-text-faint: #6f7d89;
        --doc-bg: #0f141a; --doc-bg-soft: #161c24; --doc-bg-side: #11171e;
        --doc-border: #1f2933; --doc-border-strong: #2a3540;
        --doc-accent: #4cc4ad; --doc-accent-soft: rgba(76,196,173,0.10);
        --doc-link: #6ad7c0;
        --doc-callout-info-bg: rgba(80,140,220,0.10); --doc-callout-info-bd: rgba(80,140,220,0.30);
        --doc-callout-tip-bg:  rgba(70,180,120,0.10); --doc-callout-tip-bd:  rgba(70,180,120,0.30);
        --doc-callout-warn-bg: rgba(220,170,40,0.10); --doc-callout-warn-bd: rgba(220,170,40,0.30);
        --doc-callout-quote-bg:rgba(220,170,90,0.08); --doc-callout-quote-bd:rgba(220,170,90,0.25);
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--doc-text);
    background: var(--doc-bg);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--doc-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.86em; background: var(--doc-bg-soft); padding: 0.12em 0.4em; border-radius: 4px; border: 1px solid var(--doc-border); color: var(--doc-warm); }
pre { background: var(--doc-bg-soft); border: 1px solid var(--doc-border); border-radius: 8px; padding: 1rem 1.1rem; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; max-width: 100%; }
pre code { background: transparent; border: 0; padding: 0; color: var(--doc-text); }

/* ============ FLEXBOX SHELL ============ */
.docs-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h); z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; gap: 1rem;
    background: var(--doc-bg);
    border-bottom: 1px solid var(--doc-border);
}
.docs-shell {
    display: flex;
    padding-top: var(--topbar-h);
    min-height: 100vh;
    width: 100%;
}
.docs-side {
    flex: 0 0 var(--side-w);
    width: var(--side-w);
    max-width: var(--side-w);
    background: var(--doc-bg-side);
    border-right: 1px solid var(--doc-border);
    padding: 1.3rem 0.85rem 3rem 1.25rem;
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto; overflow-x: hidden;
    box-sizing: border-box;
}
.docs-side * { min-width: 0; max-width: 100%; word-wrap: break-word; }
.docs-main {
    flex: 1 1 auto;
    min-width: 0;            /* CRITICAL: lets flex item shrink below content size */
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 2.5rem 3.5rem 5rem;
}
.docs-main-inner { max-width: var(--content-max); margin: 0 auto; min-width: 0; }
.docs-rail {
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    max-width: var(--rail-w);
    padding: 1.7rem 1.4rem 3rem 0.5rem;
    position: sticky;
    top: var(--topbar-h);
    max-height: calc(100vh - var(--topbar-h));
    overflow-y: auto; overflow-x: hidden;
    box-sizing: border-box;
}

/* ============ TOP BAR ============ */
.docs-topbar .brand {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 800; letter-spacing: 1.5px; color: var(--doc-text);
    text-decoration: none; font-size: 0.95rem;
    flex-shrink: 0;
}
.docs-topbar .brand img { height: 26px; width: auto; max-width: 30px; flex-shrink: 0; }
.docs-topbar .brand .docs-tag {
    font-weight: 700; letter-spacing: 0.5px; font-size: 0.7rem;
    background: var(--doc-accent-soft); color: var(--doc-accent-strong);
    padding: 3px 8px; border-radius: 99px;
}
.docs-topbar .search {
    flex: 1 1 auto; max-width: 480px; min-width: 0; position: relative;
}
.docs-topbar .search input {
    width: 100%; padding: 0.5rem 1rem 0.5rem 2.4rem;
    border: 1px solid var(--doc-border-strong); background: var(--doc-bg-soft);
    border-radius: 8px; font-size: 0.86rem; color: var(--doc-text);
    font-family: inherit;
}
.docs-topbar .search input::placeholder { color: var(--doc-text-faint); }
.docs-topbar .search input:focus { outline: none; border-color: var(--doc-accent); background: var(--doc-bg); box-shadow: 0 0 0 3px var(--doc-accent-soft); }
.docs-topbar .search svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--doc-text-faint); }
.docs-topbar .search .kbd { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; padding: 2px 6px; border: 1px solid var(--doc-border-strong); border-radius: 4px; color: var(--doc-text-faint); background: var(--doc-bg); }
.docs-topbar .top-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.docs-topbar .top-actions a {
    color: var(--doc-text-soft); font-size: 0.84rem; font-weight: 500;
    padding: 0.4rem 0.65rem; border-radius: 6px;
}
.docs-topbar .top-actions a:hover { background: var(--doc-bg-soft); text-decoration: none; color: var(--doc-text); }
.docs-topbar .top-actions .cta {
    background: var(--doc-accent); color: #fff !important;
    padding: 0.45rem 0.9rem; font-weight: 600;
}
.docs-topbar .top-actions .cta:hover { background: var(--doc-accent-strong); }
.docs-topbar .ham {
    display: none; background: transparent; border: 1px solid var(--doc-border-strong);
    border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--doc-text-soft);
}

/* ============ SIDENAV ============ */
.space-pick {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.7rem; margin-bottom: 1rem;
    border: 1px solid var(--doc-border); border-radius: 8px;
    background: var(--doc-bg);
    font-size: 0.83rem; font-weight: 600; color: var(--doc-text);
    cursor: pointer;
}
.space-pick .dot {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, var(--doc-accent) 0%, #1b3a2f 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.72rem; font-weight: 800;
    flex-shrink: 0;
}
.space-pick .meta { flex: 1; min-width: 0; line-height: 1.2; }
.space-pick .meta small { display: block; font-size: 0.7rem; color: var(--doc-text-faint); font-weight: 500; margin-top: 2px; }
.space-pick .chev { margin-left: auto; opacity: 0.5; flex-shrink: 0; }

.nav-section {
    margin-top: 1.2rem;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
    color: var(--doc-text-faint); text-transform: uppercase;
    padding: 0 0.7rem 0.45rem; border-bottom: 1px solid var(--doc-border);
    margin-bottom: 0.4rem;
}
.nav-tree { list-style: none; padding: 0; margin: 0; }
.nav-tree li { margin: 1px 0; }
.nav-tree a, .nav-tree .group-toggle {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.4rem 0.7rem; border-radius: 6px;
    color: var(--doc-text-soft); font-size: 0.86rem; font-weight: 500;
    text-decoration: none; line-height: 1.35;
    background: transparent; border: 0; width: 100%; cursor: pointer; text-align: left;
    font-family: inherit;
}
.nav-tree a:hover, .nav-tree .group-toggle:hover { background: var(--doc-bg); color: var(--doc-text); text-decoration: none; }
.nav-tree a.active {
    background: var(--doc-accent-soft); color: var(--doc-accent-strong); font-weight: 600;
}
.nav-tree .group-toggle .chev { margin-left: auto; opacity: 0.5; transition: transform .15s; flex-shrink: 0; }
.nav-tree .group-toggle.open .chev { transform: rotate(90deg); opacity: 0.85; }
.nav-tree .nested { list-style: none; padding-left: 0.85rem; margin: 2px 0 4px; border-left: 1px solid var(--doc-border); display: none; }
.nav-tree .group-toggle.open + .nested { display: block; }
.nav-tree .nested a { font-size: 0.82rem; padding-left: 1.1rem; }
.nav-tree .ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-tree a.active .ico, .nav-tree .group-toggle.open .ico { opacity: 1; color: var(--doc-accent); }

/* ============ CONTENT ============ */
.breadcrumbs {
    font-size: 0.78rem; color: var(--doc-text-faint);
    margin-bottom: 1rem;
}
.breadcrumbs a { color: var(--doc-text-soft); }
.breadcrumbs .sep { margin: 0 0.4rem; opacity: 0.6; }

h1.doc-title {
    font-size: 2.2rem; line-height: 1.2; font-weight: 800;
    color: var(--doc-text); letter-spacing: -0.02em;
    margin: 0.25rem 0 0.6rem;
}
.doc-lede {
    font-size: 1.05rem; line-height: 1.65; color: var(--doc-text-soft);
    margin-bottom: 1.6rem;
}
.doc-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
    padding: 0.6rem 0; margin-bottom: 2rem;
    border-top: 1px solid var(--doc-border); border-bottom: 1px solid var(--doc-border);
    font-size: 0.78rem; color: var(--doc-text-faint);
}
.doc-meta strong { color: var(--doc-text); font-weight: 600; }

.docs-main h2 {
    font-size: 1.55rem; font-weight: 700; color: var(--doc-text);
    letter-spacing: -0.01em; margin: 3rem 0 0.85rem;
    padding-top: 0.5rem; scroll-margin-top: calc(var(--topbar-h) + 24px);
}
.docs-main h3 {
    font-size: 1.15rem; font-weight: 700; color: var(--doc-text);
    margin: 2.1rem 0 0.6rem; scroll-margin-top: calc(var(--topbar-h) + 24px);
}
.docs-main h4 { font-size: 0.95rem; font-weight: 700; color: var(--doc-text); margin: 1.5rem 0 0.4rem; }
.docs-main p { margin: 0 0 1rem; }
.anchor-link { opacity: 0; margin-left: 6px; color: var(--doc-text-faint); font-weight: 400; transition: opacity .15s; }
.docs-main h2:hover .anchor-link, .docs-main h3:hover .anchor-link { opacity: 1; }
.docs-main ul, .docs-main ol { padding-left: 1.4rem; margin: 0.6rem 0 1.2rem; }
.docs-main li { margin-bottom: 0.45rem; line-height: 1.6; }

/* callouts */
.callout {
    border-radius: 10px; padding: 1rem 1.15rem 1rem 3rem;
    margin: 1.6rem 0; position: relative;
    font-size: 0.92rem; line-height: 1.6;
    border: 1px solid;
}
.callout::before {
    position: absolute; left: 1rem; top: 1rem;
    font-size: 1rem; line-height: 1;
}
.callout.info  { background: var(--doc-callout-info-bg);  border-color: var(--doc-callout-info-bd); }
.callout.info::before  { content: "ℹ️"; }
.callout.tip   { background: var(--doc-callout-tip-bg);   border-color: var(--doc-callout-tip-bd); }
.callout.tip::before   { content: "💡"; }
.callout.warn  { background: var(--doc-callout-warn-bg);  border-color: var(--doc-callout-warn-bd); }
.callout.warn::before  { content: "⚠️"; }
.callout.quote { background: var(--doc-callout-quote-bg); border-color: var(--doc-callout-quote-bd); font-style: italic; }
.callout.quote::before { content: "❝"; font-style: normal; font-size: 1.4rem; top: 0.4rem; color: var(--doc-warm); }
.callout strong:first-child { display: block; font-style: normal; margin-bottom: 0.3rem; color: var(--doc-text); }

/* tier cards */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; margin: 1.5rem 0 2rem; }
.tier { border: 1px solid var(--doc-border); border-radius: 12px; padding: 1.1rem 1.2rem; background: var(--doc-bg); position: relative; box-shadow: var(--shadow-card); }
.tier .em { font-size: 1.6rem; line-height: 1; margin-bottom: 0.5rem; }
.tier .nm { font-size: 0.95rem; font-weight: 700; color: var(--doc-text); margin-bottom: 0.2rem; }
.tier .pr { font-size: 0.78rem; color: var(--doc-text-faint); margin-bottom: 0.6rem; }
.tier .ds { font-size: 0.83rem; color: var(--doc-text-soft); line-height: 1.5; }
.tier ul { padding-left: 1.1rem; margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--doc-text-soft); }
.tier ul li { margin-bottom: 0.2rem; }
.tier[data-t="seed"]    { border-top: 3px solid #4caf50; }
.tier[data-t="ally"]    { border-top: 3px solid #2196f3; }
.tier[data-t="patron"]  { border-top: 3px solid #d2222d; }
.tier[data-t="founder"] { border-top: 3px solid #ffc222; }

/* feature cards (hub pages) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; margin: 1.4rem 0 2rem; }
.card-doc { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--doc-border); border-radius: 12px; background: var(--doc-bg); text-decoration: none !important; transition: border-color .15s, transform .15s; }
.card-doc:hover { border-color: var(--doc-accent); transform: translateY(-2px); }
.card-doc .ic { width: 28px; height: 28px; color: var(--doc-accent); margin-bottom: 0.6rem; }
.card-doc .t { font-size: 0.95rem; font-weight: 700; color: var(--doc-text); margin-bottom: 0.25rem; }
.card-doc .d { font-size: 0.83rem; color: var(--doc-text-soft); line-height: 1.5; }

/* definition list */
dl.def { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.2rem; margin: 1rem 0 1.5rem; padding: 0.9rem 1.1rem; background: var(--doc-bg-soft); border: 1px solid var(--doc-border); border-radius: 10px; }
dl.def dt { font-weight: 700; color: var(--doc-text); font-size: 0.88rem; }
dl.def dd { margin: 0; color: var(--doc-text-soft); font-size: 0.88rem; }

/* tables */
table.doc { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 1rem 0 1.6rem; border: 1px solid var(--doc-border); border-radius: 8px; overflow: hidden; display: table; }
table.doc th, table.doc td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--doc-border); vertical-align: top; }
table.doc th { background: var(--doc-bg-soft); font-weight: 700; color: var(--doc-text); }
table.doc tr:last-child td { border-bottom: 0; }

/* footer next/prev */
.doc-foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin: 3rem 0 2rem; }
.doc-foot-nav a { border: 1px solid var(--doc-border); border-radius: 10px; padding: 0.85rem 1rem; display: block; text-decoration: none !important; transition: border-color .15s, background .15s; }
.doc-foot-nav a:hover { border-color: var(--doc-accent); background: var(--doc-bg-soft); }
.doc-foot-nav .lbl { font-size: 0.7rem; color: var(--doc-text-faint); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; }
.doc-foot-nav .ttl { font-size: 0.95rem; color: var(--doc-text); font-weight: 600; margin-top: 4px; }
.doc-foot-nav .next { text-align: right; }
.doc-edit { margin-top: 1.2rem; font-size: 0.8rem; color: var(--doc-text-faint); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid var(--doc-border); }

/* primary action button */
.doc-cta { display: inline-block; background: var(--doc-accent); color: #fff !important; padding: 0.85rem 2rem; border-radius: 99px; font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: var(--shadow-card); }
.doc-cta:hover { background: var(--doc-accent-strong); text-decoration: none !important; }

/* on-this-page rail */
.docs-rail .rail-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; color: var(--doc-text-faint); text-transform: uppercase; margin-bottom: 0.65rem; }
.docs-rail ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--doc-border); }
.docs-rail ol li { line-height: 1.4; margin: 0; }
.docs-rail ol li.depth-3 { padding-left: 0.85rem; }
.docs-rail ol a { display: block; padding: 0.32rem 0.85rem; font-size: 0.78rem; color: var(--doc-text-soft); border-left: 2px solid transparent; margin-left: -1px; }
.docs-rail ol a:hover { color: var(--doc-text); text-decoration: none; }
.docs-rail ol a.active { color: var(--doc-accent-strong); border-left-color: var(--doc-accent); font-weight: 600; }

/* scrim for mobile */
.docs-scrim { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(20,28,40,0.4); z-index: 40; display: none; }
.docs-scrim.show { display: block; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    .docs-rail { display: none; }
    .docs-main { padding: 2rem 2rem 4rem; }
}
@media (max-width: 820px) {
    .docs-topbar .ham { display: inline-flex; align-items: center; gap: 6px; }
    .docs-topbar .search { display: none; }
    .docs-side {
        position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
        width: 280px; z-index: 60;
        transform: translateX(-105%); transition: transform .25s ease;
        box-shadow: 8px 0 24px rgba(20,28,40,0.10);
    }
    .docs-side.open { transform: translateX(0); }
    .docs-main { padding: 1.5rem 1.2rem 3rem; }
    h1.doc-title { font-size: 1.7rem; }
}