/* ==========================================================================
   S16 Estimate Builder - mockup chrome (self-contained DataRipple look)
   Reproduces the shipped "dataripple-new" palette (red #CC0C1F on light,
   navy #1B2433 sidebar, Ubuntu) from the real theme.css :root, compact and
   Pages-safe (no 415KB app.css, no font/image paths that 404 on Pages).
   Review-only mockup. Nothing wired, nothing pushed.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  --bg: #FFFFFF;
  --surface-secondary: #eef2f7;
  --card: #FFFFFF;
  --shell: #1B2433;
  --border-default: #cdd8e8;
  --border-input: #2F3C4E;
  --border-subtle: rgba(0,0,0,0.06);
  --fg-1: #0B1220;
  --fg-2: #18293B;
  --fg-3: #5A6B7B;
  --brand: #CC0C1F;
  --brand-deep: #A80917;
  --brand-warm: #E65328;
  --brand-subtle: rgba(204,12,31,0.08);
  --brand-soft: rgba(204,12,31,0.15);
  --sky: #5189AD;
  --success: #166534;
  --success-soft: #dcfce7;
  --warning: #854D0E;
  --warning-soft: #fef9c3;
  --danger: #991B1B;
  --danger-soft: #fee2e2;
  --info: #1E40AF;
  --info-soft: #dbeafe;
  --amber: #D9A441;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(16,26,40,0.06), 0 1px 1px rgba(16,26,40,0.04);
  --shadow-md: 0 6px 18px rgba(16,26,40,0.08), 0 2px 6px rgba(16,26,40,0.05);
  --shadow-lg: 0 18px 48px rgba(16,26,40,0.16);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--surface-secondary);
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--fg-1); font-weight: 500; }

/* ---- review-only top strip -------------------------------------------- */
.mockbar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px; background: var(--shell); color: #fff;
  position: sticky; top: 0; z-index: 80;
  border-bottom: 3px solid var(--brand);
}
.mockbar h1 { color: #fff; font-size: 14px; font-weight: 500; }
.mb-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: var(--brand); padding: 3px 8px; border-radius: 999px;
}
.mb-desc { font-size: 12px; color: rgba(255,255,255,0.62); }
.mb-spacer { flex: 1; }
.mb-nav { display: flex; gap: 4px; }
.mb-nav a {
  font-size: 12px; color: rgba(255,255,255,0.75); padding: 5px 10px; border-radius: var(--r-sm);
}
.mb-nav a:hover { background: rgba(255,255,255,0.10); color: #fff; }
.mb-nav a.on { background: var(--brand); color: #fff; }

/* ---- app shell (faithful rc-* chrome) --------------------------------- */
.mk-shell { max-width: 1240px; margin: 0 auto; padding: 22px 26px 60px; }

.rc-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.rc-page-eyebrow { font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.rc-breadcrumbs a { color: var(--fg-3); }
.rc-breadcrumbs a:hover { color: var(--brand); }
.rc-crumb-sep { color: var(--border-default); }
.rc-page-title { font-size: 21px; font-weight: 500; color: var(--fg-1); }
.rc-page-head-r { display: flex; gap: 8px; flex-shrink: 0; }

.rc-btn {
  font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  border-radius: var(--r-md); padding: 8px 14px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px; transition: all .12s ease; white-space: nowrap;
}
.rc-btn-sm { font-size: 12px; padding: 6px 11px; }
.rc-btn-primary { background: var(--brand); color: #fff; }
.rc-btn-primary:hover { background: var(--brand-warm); }
.rc-btn-ghost { background: #fff; color: var(--fg-2); border-color: var(--border-default); }
.rc-btn-ghost:hover { border-color: var(--fg-3); background: #fbfcfe; }
.rc-btn[disabled], .rc-btn.is-dark { opacity: .55; cursor: not-allowed; }
.rc-btn.is-dark { position: relative; }
.soon {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--border-default); color: var(--fg-3); padding: 1px 5px; border-radius: 999px; margin-left: 5px;
}

.rc-tabs-u { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 0; overflow-x: auto; }
.rc-tab-u { font-size: 13px; color: var(--fg-3); padding: 10px 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.rc-tab-u:hover { color: var(--fg-2); }
.rc-tab-u.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }

.rc-pm-panel {
  background: var(--card); border: 1px solid var(--border-default); border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px;
}

/* ---- index hub -------------------------------------------------------- */
.idx-wrap { max-width: 1080px; margin: 0 auto; padding: 30px 26px 70px; }
.idx-hero { margin-bottom: 24px; }
.idx-hero .eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); display: inline-block; margin-bottom: 10px;
}
.idx-hero h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 12px; }
.idx-hero h1 b { color: var(--brand); font-weight: 700; }
.idx-hero p { font-size: 15px; color: var(--fg-2); max-width: 760px; margin: 0 0 6px; }
.idx-hero p b { color: var(--fg-1); }

.idx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.idx-card {
  --ac: var(--brand);
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--border-default); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease;
}
a.idx-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.idx-card .top { height: 5px; background: var(--ac); }
.idx-card .body { padding: 16px 17px 18px; display: flex; flex-direction: column; height: 100%; }
.idx-card .num { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ac); margin-bottom: 7px; }
.idx-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.idx-card .desc { font-size: 13px; color: var(--fg-3); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.idx-card .desc b { color: var(--fg-2); }
.idx-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag { font-size: 11px; color: var(--fg-3); background: var(--surface-secondary); border: 1px solid var(--border-default); padding: 2px 8px; border-radius: 999px; }
.idx-card .go { font-size: 13px; font-weight: 500; color: var(--ac); }

/* ---- kickoff sections ------------------------------------------------- */
.kick { max-width: 1080px; margin: 0 auto; }
.kick-sec { background: var(--card); border: 1px solid var(--border-default); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 16px; }
.kick-sec > .lbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.kick-sec h2 { font-size: 20px; margin-bottom: 12px; }
.kick-sec p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0 0 10px; }
.kick-sec p b { color: var(--fg-1); }
.kick-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.kick-2col h4 { font-size: 13px; margin-bottom: 6px; color: var(--fg-1); }
.kick-2col ul { margin: 0; padding-left: 18px; }
.kick-2col li { font-size: 13px; color: var(--fg-3); margin-bottom: 5px; line-height: 1.45; }
.kick-2col li b { color: var(--fg-2); }

.scope { width: 100%; border-collapse: collapse; font-size: 13px; }
.scope th, .scope td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.scope th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); font-weight: 700; }
.scope td b { color: var(--fg-1); }
.scope .v { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.v.ok { background: var(--success-soft); color: var(--success); }
.v.partial { background: var(--warning-soft); color: var(--warning); }
.v.gated { background: var(--danger-soft); color: var(--danger); }
.callout { border-left: 3px solid var(--brand); background: var(--brand-subtle); padding: 12px 16px; border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 13.5px; color: var(--fg-2); line-height: 1.55; }
.callout b { color: var(--fg-1); }

@media (max-width: 900px) {
  .idx-grid, .kick-2col { grid-template-columns: 1fr; }
}