/*
 * rubi.works v7 doc design system
 * Shared by all static docs at /docs/<slug>.
 * Source of truth: views/pages/docs_v7.xml (keep in sync on changes).
 * Scoped under .rubi-d.
 */

/* ============================================================
   RUBI DOC DESIGN SYSTEM v7
   Space Grotesk + DM Sans + JetBrains Mono
   Scoped under .rubi-d
   ============================================================ */

html, body {
    background: #E4DFDA;
    margin: 0;
    padding: 0;
}

.rubi-d {
    --d-rubi:        #DF1860;
    --d-rubi-light:  #EF4F80;
    --d-rubi-dark:   #C8145A;
    --d-rubi-mist:   #FDF0F4;

    --d-midnight:    #1A1A2E;
    --d-charcoal:    #3C3939;
    --d-beige:       #E4DFDA;
    --d-warm-soft:   #F0EBE8;
    --d-warm-light:  #FAFAF9;
    --d-white:       #FFFFFF;

    --d-text:        #1A1A2E;
    --d-text-2:      #555555;
    --d-text-3:      #8A8585;
    --d-text-4:      #aaaaaa;
    --d-border:      #F0EBE8;
    --d-border-dark: #E4DFDA;

    --d-font-display: 'Space Grotesk', system-ui, sans-serif;
    --d-font-body: 'DM Sans', system-ui, sans-serif;
    --d-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --d-radius-sm: 6px;
    --d-radius:    8px;
    --d-radius-lg: 10px;
    --d-radius-xl: 16px;

    font-family: var(--d-font-body);
    color: var(--d-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'kern','liga','calt';
}
.rubi-d *, .rubi-d *::before, .rubi-d *::after { box-sizing: border-box; margin: 0; padding: 0; }
.rubi-d a { color: inherit; text-decoration: none; }

/* ─── PAGE CONTAINER ─── */
.rubi-d .page {
    max-width: 800px;
    margin: 40px auto;
    background: var(--d-white);
    padding: 40px 52px;
    box-shadow: 0 4px 24px rgba(26,26,46,0.08);
    border-radius: 4px;
}

/* ─── HEADER ─── */
.rubi-d .doc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 3px solid var(--d-rubi);
    padding-bottom: 18px;
    margin-bottom: 26px;
    gap: 16px;
    flex-wrap: wrap;
}
.rubi-d .logo-area { display: flex; align-items: center; gap: 14px; }
.rubi-d .logo-diamond { width: 46px; height: 46px; flex-shrink: 0; }
.rubi-d .logo-diamond svg { width: 100%; height: 100%; }
/* Full wordmark logo — replaces inline diamond + text span */
.rubi-d .logo-full {
    height: 36px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.rubi-d .logo-text {
    font-family: var(--d-font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--d-text);
}
.rubi-d .header-right { text-align: right; }
.rubi-d .edition-tag {
    display: inline-block;
    background: var(--d-rubi-mist);
    color: var(--d-rubi);
    font-family: var(--d-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}
.rubi-d .doc-label {
    display: block;
    font-family: var(--d-font-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--d-text-4);
    letter-spacing: 0.5px;
    margin-top: 5px;
    text-transform: uppercase;
}

/* ─── HERO ─── */
.rubi-d .hero { margin-bottom: 26px; }
.rubi-d .hero-headline {
    font-family: var(--d-font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--d-text);
    margin-bottom: 10px;
}
.rubi-d .hero-headline em {
    color: var(--d-rubi);
    font-style: italic;
}
.rubi-d .hero-body {
    font-family: var(--d-font-body);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--d-text-2);
    max-width: 640px;
}
.rubi-d .hero-body strong { color: var(--d-text); font-weight: 600; }
.rubi-d .hero-body a { color: var(--d-rubi); }
.rubi-d .hero-body a:hover { text-decoration: underline; }

/* ─── SECTION LABEL (diamond marker) ─── */
.rubi-d .section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--d-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--d-rubi);
    margin-bottom: 14px;
    margin-top: 30px;
}
.rubi-d .section-label::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--d-rubi);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ─── PILLAR CARDS (2-col capability groups) ─── */
.rubi-d .pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 4px;
}
.rubi-d .pillar {
    border: 1.5px solid var(--d-border);
    border-radius: var(--d-radius-lg);
    padding: 16px 18px;
    position: relative;
}
.rubi-d .pillar-icon {
    width: 30px; height: 30px;
    background: var(--d-rubi-mist);
    border-radius: var(--d-radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
}
.rubi-d .pillar-icon svg {
    width: 15px; height: 15px;
    stroke: var(--d-rubi); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rubi-d .pillar h4 {
    font-family: var(--d-font-display);
    font-size: 13px; font-weight: 600;
    color: var(--d-text); margin-bottom: 5px;
}
.rubi-d .pillar p {
    font-family: var(--d-font-body);
    font-size: 12px; line-height: 1.6; color: var(--d-text-2);
}
.rubi-d .pillar-includes {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--d-border);
    font-family: var(--d-font-mono);
    font-size: 10px; color: var(--d-rubi);
    font-weight: 500; letter-spacing: 0.3px;
}
.rubi-d .pillar-includes span {
    display: inline-flex; align-items: center; gap: 4px;
}
.rubi-d .pillar-includes span::before {
    content: ''; width: 4px; height: 4px;
    background: var(--d-rubi-light); border-radius: 50%;
}

/* ─── QUICK FEATURES (2-col scan strip) ─── */
.rubi-d .quick-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    margin-bottom: 4px;
}
.rubi-d .quick-feature { display: flex; gap: 12px; align-items: flex-start; }
.rubi-d .qf-icon {
    flex-shrink: 0; width: 28px; height: 28px;
    background: var(--d-rubi-mist); border-radius: var(--d-radius);
    display: flex; align-items: center; justify-content: center;
}
.rubi-d .qf-icon svg {
    width: 14px; height: 14px;
    stroke: var(--d-rubi); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rubi-d .quick-feature h5 {
    font-family: var(--d-font-display);
    font-size: 13px; font-weight: 600;
    color: var(--d-text); margin-bottom: 1px;
}
.rubi-d .quick-feature p {
    font-family: var(--d-font-body);
    font-size: 12px; line-height: 1.5; color: var(--d-text-2);
}

/* ─── FEATURES LIST (vertical) ─── */
.rubi-d .features { display: flex; flex-direction: column; gap: 8px; }
.rubi-d .feature { display: flex; gap: 12px; align-items: flex-start; }
.rubi-d .icon-box {
    flex-shrink: 0; width: 28px; height: 28px;
    background: var(--d-rubi-mist); border-radius: var(--d-radius);
    display: flex; align-items: center; justify-content: center;
}
.rubi-d .icon-box svg {
    width: 14px; height: 14px;
    stroke: var(--d-rubi); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rubi-d .feature-content h4 {
    font-family: var(--d-font-display);
    font-size: 13px; font-weight: 600;
    color: var(--d-text); margin-bottom: 1px;
}
.rubi-d .feature-content p {
    font-family: var(--d-font-body);
    font-size: 12.5px; line-height: 1.5; color: var(--d-text-2);
}

/* ─── DIVIDER SECTION (line-label-line) ─── */
.rubi-d .divider-section {
    display: flex; align-items: center; gap: 16px;
    margin: 28px 0 16px;
}
.rubi-d .divider-section::before,
.rubi-d .divider-section::after {
    content: ''; flex: 1; height: 1px; background: var(--d-border);
}
.rubi-d .ds-label {
    font-family: var(--d-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--d-text-3); white-space: nowrap;
}

/* ─── SETUP GRID (numbered steps) ─── */
.rubi-d .setup-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 4px;
}
.rubi-d .setup-item { display: flex; gap: 12px; align-items: flex-start; }
.rubi-d .setup-num {
    flex-shrink: 0; width: 24px; height: 24px;
    background: var(--d-rubi-mist); border-radius: 50%;
    font-family: var(--d-font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--d-rubi);
    display: flex; align-items: center; justify-content: center;
}
.rubi-d .setup-item h5 {
    font-family: var(--d-font-display);
    font-size: 12.5px; font-weight: 600;
    color: var(--d-text); margin-bottom: 2px;
}
.rubi-d .setup-item p {
    font-family: var(--d-font-body);
    font-size: 11.5px; line-height: 1.55; color: var(--d-text-2);
}

/* ─── PROVIDE GRID (dot bullets) ─── */
.rubi-d .provide-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 4px;
}
.rubi-d .provide-item { display: flex; gap: 10px; align-items: flex-start; }
.rubi-d .provide-dot {
    flex-shrink: 0; width: 8px; height: 8px;
    background: var(--d-rubi);
    transform: rotate(45deg);
    margin-top: 4px;
}
.rubi-d .provide-item h5 {
    font-family: var(--d-font-display);
    font-size: 12.5px; font-weight: 600;
    color: var(--d-text); margin-bottom: 2px;
}
.rubi-d .provide-item p {
    font-family: var(--d-font-body);
    font-size: 11.5px; line-height: 1.55; color: var(--d-text-2);
}

/* ─── CONFIG LIST (diamond bullet items) ─── */
.rubi-d .config-list { display: flex; flex-direction: column; gap: 6px; }
.rubi-d .config-item {
    font-family: var(--d-font-body);
    font-size: 12.5px; line-height: 1.5;
    color: var(--d-text-2);
    padding-left: 16px; position: relative;
}
.rubi-d .config-item::before {
    content: '';
    position: absolute; left: 0; top: 6px;
    width: 6px; height: 6px;
    background: var(--d-rubi-light);
    transform: rotate(45deg);
}
.rubi-d .config-item strong {
    font-family: var(--d-font-display);
    color: var(--d-text); font-weight: 600;
}

/* ─── SCOPE NOTE / NOTICE (left-border callout) ─── */
.rubi-d .scope-note {
    background: var(--d-rubi-mist);
    border-left: 3px solid var(--d-rubi);
    border-radius: 0 var(--d-radius) var(--d-radius) 0;
    padding: 14px 18px;
    margin: 16px 0;
}
.rubi-d .scope-note p {
    font-size: 12.5px; line-height: 1.6; color: var(--d-text-2);
}
.rubi-d .scope-note strong { color: var(--d-text); font-weight: 600; }
.rubi-d .notice {
    background: var(--d-warm-light);
    border-left: 3px solid var(--d-border-dark);
    border-radius: 0 var(--d-radius) var(--d-radius) 0;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 12px; line-height: 1.6; color: var(--d-text-3);
}

/* ─── PLATFORM PILLS ─── */
.rubi-d .platforms {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 4px;
}
.rubi-d .platform-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid var(--d-border);
    border-radius: var(--d-radius);
    font-family: var(--d-font-body);
    font-size: 12px; font-weight: 500;
    color: var(--d-text-2);
    transition: all 0.15s;
}
.rubi-d .platform-pill.active {
    border-color: var(--d-rubi);
    background: var(--d-rubi-mist);
    color: var(--d-rubi);
    font-weight: 600;
}
.rubi-d .platform-pill .status {
    font-family: var(--d-font-mono);
    font-size: 9px; font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--d-warm-soft);
    color: var(--d-text-3);
}
.rubi-d .platform-pill.active .status {
    background: var(--d-rubi);
    color: var(--d-white);
}

/* ─── TABS (region selector etc.) ─── */
.rubi-d .tab-bar {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px;
}
.rubi-d .tab-hint {
    font-family: var(--d-font-body);
    font-size: 12px; color: var(--d-text-3);
}
.rubi-d .tabs {
    display: flex; gap: 0;
    border: 1.5px solid var(--d-border);
    border-radius: var(--d-radius);
    overflow: hidden;
}
.rubi-d .tab {
    padding: 7px 18px;
    border: none;
    background: var(--d-white);
    color: var(--d-text-2);
    font-family: var(--d-font-body);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid var(--d-border);
}
.rubi-d .tab:last-child { border-right: none; }
.rubi-d .tab.active {
    background: var(--d-rubi-mist);
    color: var(--d-rubi);
    font-weight: 600;
}

/* ─── FORM INPUTS ─── */
.rubi-d .form-select,
.rubi-d .form-input {
    font-family: var(--d-font-body);
    font-size: 13px;
    padding: 7px 12px;
    border: 1.5px solid var(--d-border);
    border-radius: var(--d-radius);
    background: var(--d-warm-light);
    color: var(--d-text);
    transition: border-color 0.15s;
}
.rubi-d .form-select:focus,
.rubi-d .form-input:focus {
    outline: none;
    border-color: var(--d-rubi);
}
.rubi-d .form-label {
    font-family: var(--d-font-body);
    font-size: 12px; font-weight: 500;
    color: var(--d-text-2); margin-bottom: 4px;
    display: block;
}
/* Range slider */
.rubi-d input[type="range"] {
    -webkit-appearance: none; width: 100%;
    height: 4px; border-radius: 2px;
    background: var(--d-border);
    outline: none;
}
.rubi-d input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--d-rubi);
    box-shadow: 0 2px 6px rgba(223,24,96,0.3);
    cursor: pointer;
}
.rubi-d .slider-field {
    margin-bottom: 12px;
}
.rubi-d .slider-field .slider-header {
    display: flex; justify-content: space-between;
    align-items: baseline; margin-bottom: 6px;
}
.rubi-d .slider-field .slider-value {
    font-family: var(--d-font-mono);
    font-size: 13px; font-weight: 500;
    color: var(--d-rubi);
}
.rubi-d .slider-field .slider-hint {
    font-size: 11px; color: var(--d-text-3);
    margin-top: 4px;
}

/* ─── FORMULA BOX (mono calculation display) ─── */
.rubi-d .formula-box {
    background: var(--d-warm-light);
    border: 1px solid var(--d-border);
    border-radius: var(--d-radius);
    padding: 14px 18px;
    margin: 12px 0;
}
.rubi-d .formula-box code {
    font-family: var(--d-font-mono);
    font-size: 12px; line-height: 1.8;
    color: var(--d-text-2);
}

/* ─── TOTAL CARD ─── */
.rubi-d .total-card {
    border: 1.5px solid var(--d-border);
    border-radius: var(--d-radius-lg);
    overflow: hidden;
    margin: 16px 0;
}
.rubi-d .total-lines { padding: 16px 18px; }
.rubi-d .total-line {
    display: flex; justify-content: space-between;
    padding: 4px 0;
    font-size: 12.5px; color: var(--d-text-2);
    border-bottom: 1px solid var(--d-border);
}
.rubi-d .total-line:last-child { border-bottom: 0; }
.rubi-d .total-line .tl-label { font-family: var(--d-font-body); }
.rubi-d .total-line .tl-value {
    font-family: var(--d-font-mono);
    font-weight: 500; color: var(--d-text);
}
.rubi-d .total-bottom {
    background: var(--d-rubi-mist);
    padding: 16px 18px;
    display: flex; justify-content: space-between;
    align-items: center;
}
.rubi-d .total-figure { text-align: right; }
.rubi-d .total-figure .tf-label {
    font-family: var(--d-font-mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--d-text-3);
}
.rubi-d .total-figure .tf-value {
    font-family: var(--d-font-display);
    font-size: 22px; font-weight: 700;
    color: var(--d-rubi);
}

/* ─── INLINE BADGE ─── */
.rubi-d .cost-badge {
    display: inline-block;
    font-family: var(--d-font-mono);
    font-size: 11px; font-weight: 500;
    background: var(--d-rubi-mist);
    color: var(--d-rubi);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

/* ─── CARD (generic bordered card) ─── */
.rubi-d .doc-card {
    border: 1.5px solid var(--d-border);
    border-radius: var(--d-radius-lg);
    padding: 18px;
    margin: 12px 0;
}
.rubi-d .doc-card-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.rubi-d .doc-card-icon {
    width: 32px; height: 32px;
    background: var(--d-rubi-mist);
    border-radius: var(--d-radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rubi-d .doc-card-icon svg {
    width: 16px; height: 16px;
    stroke: var(--d-rubi); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rubi-d .doc-card-header h4 {
    font-family: var(--d-font-display);
    font-size: 14px; font-weight: 600; color: var(--d-text);
}
.rubi-d .doc-card-meta {
    font-family: var(--d-font-mono);
    font-size: 10px; font-weight: 500;
    color: var(--d-text-3);
    letter-spacing: 0.5px; text-transform: uppercase;
}

/* ─── SECTION HEADING (h2/h3) ─── */
.rubi-d h2 {
    font-family: var(--d-font-display);
    font-size: 18px; font-weight: 700;
    color: var(--d-text);
    margin-bottom: 10px; margin-top: 24px;
    letter-spacing: -0.02em;
}
.rubi-d h2:first-of-type { margin-top: 0; }
.rubi-d h3 {
    font-family: var(--d-font-mono);
    font-size: 10px; font-weight: 500;
    color: var(--d-rubi);
    margin-top: 18px; margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ─── FIELD GRID ─── */
.rubi-d .field-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 12px; margin-bottom: 12px;
}
.rubi-d .field { display: flex; flex-direction: column; gap: 4px; }

/* ─── FOOTER ─── */
.rubi-d .doc-footer {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--d-border-dark);
    font-family: var(--d-font-mono);
    font-size: 10px;
    color: var(--d-text-4);
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ─── ACTION BUTTONS (fixed bottom-right, hidden in print) ─── */
.rubi-d .btn-group {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}
.rubi-d .btn-group button {
    color: var(--d-white);
    background: var(--d-charcoal);
    border: none;
    padding: 12px 24px;
    border-radius: var(--d-radius);
    font-family: var(--d-font-display);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(60,57,57,0.3);
    transition: background 0.15s;
}
.rubi-d .btn-group button:hover { background: var(--d-midnight); }
.rubi-d .btn-group a {
    color: var(--d-white);
    background: var(--d-rubi);
    border: none;
    padding: 12px 24px;
    border-radius: var(--d-radius);
    font-family: var(--d-font-display);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 14px rgba(223,24,96,0.3);
    transition: background 0.15s;
}
.rubi-d .btn-group a:hover { background: var(--d-rubi-dark); }

/* ─── PAGE BREAK UTILITY ─── */
.rubi-d .page-break-before {
    break-before: page;
    page-break-before: always;
    margin-top: 0;
}

/* ─── PRINT STYLES ─── */
@media print {
    body { margin: 0; background: #fff; }
    .no-print { display: none !important; }
    .rubi-d .page { box-shadow: none; padding: 24px 40px; max-width: none; }

    /* Prevent orphaned headings — labels/headings stick to their content */
    .rubi-d .section-label {
        break-after: avoid; page-break-after: avoid;
        margin-top: 18px;
    }
    .rubi-d h2, .rubi-d h3 {
        break-after: avoid; page-break-after: avoid;
    }
    .rubi-d .divider-section {
        break-inside: avoid; page-break-inside: avoid;
        break-after: avoid; page-break-after: avoid;
    }
    .rubi-d .ds-label {
        break-after: avoid; page-break-after: avoid;
    }

    /* Keep grid/list groups together — don't split from their label */
    .rubi-d .pillars,
    .rubi-d .quick-features,
    .rubi-d .setup-grid,
    .rubi-d .provide-grid,
    .rubi-d .platforms,
    .rubi-d .features,
    .rubi-d .config-list {
        break-before: avoid; page-break-before: avoid;
    }

    /* Keep individual items from splitting across pages */
    .rubi-d .pillar,
    .rubi-d .setup-item,
    .rubi-d .provide-item,
    .rubi-d .quick-feature,
    .rubi-d .feature,
    .rubi-d .config-item,
    .rubi-d .platform-pill {
        break-inside: avoid; page-break-inside: avoid;
    }

    /* Keep callouts, cards, and totals intact */
    .rubi-d .scope-note,
    .rubi-d .notice,
    .rubi-d .doc-card,
    .rubi-d .total-card,
    .rubi-d .formula-box {
        break-inside: avoid; page-break-inside: avoid;
    }

    /* Hero should not be separated from the first section */
    .rubi-d .hero {
        break-after: avoid; page-break-after: avoid;
    }

    /* Footer stays with last content, never floats alone */
    .rubi-d .doc-footer {
        break-before: avoid; page-break-before: avoid;
    }

    /* Tab bars, sliders — keep form groups together */
    .rubi-d .tab-bar,
    .rubi-d .field-grid,
    .rubi-d .slider-field {
        break-inside: avoid; page-break-inside: avoid;
    }
}

@media (max-width: 640px) {
    .rubi-d .page { padding: 24px; }
    .rubi-d .pillars,
    .rubi-d .quick-features,
    .rubi-d .setup-grid,
    .rubi-d .provide-grid,
    .rubi-d .field-grid { grid-template-columns: 1fr; }
}