/* ── Design tokens — kept in lock-step with deepdive-page.html so the
       /complete-the-work page feels native to the rest of the site
       instead of looking like a different surface entirely. ─────────── */
  #tenki-ctw {
    --t-blue:           #005A9C;
    --t-blue-light:     #E8F0F7;
    --t-blue-stroke:    #B3D4F0;
    --t-green:          #008C45;
    --t-green-light:    #E8F5E9;
    --t-green-stroke:   #A5D6A7;
    --t-black:          #1A1A1A;
    --t-black-light:    #F4F4F4;
    --t-black-stroke:   #CCCCCC;
    --t-white-accent:   #888;
    --t-amber:          #D97706;
    --t-amber-light:    #FEF3C7;
    --t-amber-dark:     #78350F;
    --t-amber-stroke:   #FBBF24;
    --t-text:           #1f2937;
    --t-muted:          #6b7280;
    --t-bg:             #ffffff;
    --t-surface:        #F8F9FA;
    --t-border:         #E5E7EB;
    --t-shadow:         0 4px 16px rgba(0,0,0,.06);
    --t-shadow-strong:  0 10px 40px rgba(0,0,0,.08);
    --t-radius:         12px;

    /* Native font stack — same as deepdive-page so glyphs match exactly */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--t-text);
    background: var(--t-bg);
    line-height: 1.55;
    box-sizing: border-box;
  }
  #tenki-ctw *, #tenki-ctw *::before, #tenki-ctw *::after { box-sizing: inherit; }
  #tenki-ctw a { color: var(--t-blue); }

  /* ── Outer layout — mirrors deepdive's .dd-page ──────────────────── */
  .ctw-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    background: var(--t-bg);
  }

  /* ── Page header (centered title + subtitle + description) ──────── */
  /* Same structure as .dd-page-header on deep-dive pages.            */
  .ctw-page-header { text-align: center; margin-bottom: 40px; }
  .ctw-page-header h1 {
    font-size: 2.4rem; margin: 0 0 12px;
    font-weight: 800; line-height: 1.2;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--t-black);
  }
  .ctw-page-header .ctw-page-eyebrow {
    display: block; font-size: 1.1rem;
    font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--t-blue);
    margin-bottom: 8px;
  }
  .ctw-page-header p {
    font-size: 1.1rem; color: var(--t-muted);
    max-width: 720px; margin: 12px auto 0; line-height: 1.55;
  }

  /* ── Hero card — multi-pillar top border (cross-pillar signal) ───── */
  .ctw-hero-card {
    background: #fff; border-radius: var(--t-radius);
    padding: 28px 32px; box-shadow: var(--t-shadow);
    margin-bottom: 32px;
    position: relative; overflow: hidden;
  }
  /* Multi-pillar gradient top border — visual cue that this page draws
     from every pillar, not just one. */
  .ctw-hero-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg,
      var(--t-blue)  0%, var(--t-blue)  25%,
      var(--t-green) 25%, var(--t-green) 50%,
      var(--t-black) 50%, var(--t-black) 75%,
      var(--t-white-accent) 75%, var(--t-white-accent) 100%);
  }
  .ctw-hero-card-title {
    font-size: 1.6rem; font-weight: 700; line-height: 1.3;
    margin: 0 0 12px; color: var(--t-black);
  }
  .ctw-hero-card p { margin: 0 0 14px; font-size: 15px; color: var(--t-muted); }
  .ctw-jump {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 18px;
  }
  .ctw-jump a {
    padding: 9px 14px; background: var(--t-surface);
    border: 1px solid var(--t-border); border-radius: 999px;
    color: var(--t-text); font-size: 13px; font-weight: 600;
    text-decoration: none; transition: all .15s;
  }
  .ctw-jump a:hover {
    border-color: var(--t-blue); color: var(--t-blue);
    transform: translateY(-1px);
  }

  /* ── Section header — matches deep-dive's section-title rhythm ──── */
  .ctw-section {
    margin-top: 48px;
    scroll-margin-top: 80px;  /* anchor offset for jump links */
  }
  .ctw-section-head {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 6px; flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--t-border);
  }
  .ctw-section-head h2 {
    margin: 0; font-size: 1.4rem; font-weight: 800;
    color: var(--t-black); letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .ctw-section-count {
    font-size: 13px; color: var(--t-muted);
    font-weight: 600;
  }
  .ctw-section-sub {
    margin: 14px 0 20px; color: var(--t-muted);
    font-size: 14px; max-width: 740px; line-height: 1.6;
  }
  .ctw-section--right-now .ctw-section-head { border-bottom-color: var(--t-blue-stroke); }
  .ctw-section--right-now .ctw-section-head h2  { color: var(--t-blue); }
  .ctw-section--honor .ctw-section-head { border-bottom-color: var(--t-amber-stroke); }
  .ctw-section--honor .ctw-section-head h2      { color: var(--t-amber-dark); }
  .ctw-section--ahead .ctw-section-head { border-bottom-color: var(--t-black-stroke); }
  .ctw-section--ahead .ctw-section-head h2      { color: var(--t-black); }

  /* ── Card grid — card pattern mirrors deep-dive's .dd-card ──────── */
  .ctw-grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  /* Top-border card (matches dd-card pattern) instead of left-border bar */
  .ctw-card {
    background: #fff;
    border-radius: var(--t-radius);
    border-top: 5px solid var(--t-black);
    padding: 22px 22px 20px;
    display: flex; flex-direction: column;
    box-shadow: var(--t-shadow);
    transition: transform .15s, box-shadow .15s;
  }
  .ctw-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-strong);
  }
  /* Pillar tint via top border (same as deep-dive's .dd-hero) */
  .ctw-card.theme-blue   { border-top-color: var(--t-blue); }
  .ctw-card.theme-green  { border-top-color: var(--t-green); }
  .ctw-card.theme-black  { border-top-color: var(--t-black); }
  .ctw-card.theme-white  { border-top-color: var(--t-white-accent); }
  /* Honor section: amber regardless of pillar — donor-action signal */
  .ctw-section--honor .ctw-card { border-top-color: var(--t-amber); }
  /* Ahead section: dashed top border (signals "not yet") */
  .ctw-section--ahead .ctw-card { border-top-style: dashed; }

  /* Pillar badge — matches deep-dive .dd-badge pill style */
  .ctw-card-pillar {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    padding: 5px 11px; border-radius: 16px;
    background: var(--t-black-light); color: var(--t-black);
    border: 1px solid var(--t-black-stroke);
    margin-bottom: 12px; max-width: max-content;
  }
  .ctw-card-pillar a { color: inherit; text-decoration: none; }
  .ctw-card.theme-blue  .ctw-card-pillar { background: var(--t-blue-light);  color: var(--t-blue);  border-color: var(--t-blue-stroke);  }
  .ctw-card.theme-green .ctw-card-pillar { background: var(--t-green-light); color: var(--t-green); border-color: var(--t-green-stroke); }
  .ctw-card.theme-black .ctw-card-pillar { background: var(--t-black-light); color: var(--t-black); border-color: var(--t-black-stroke); }

  /* Activity name — mirrors deep-dive .dd-title scale */
  .ctw-card-name {
    font-size: 1.2rem; font-weight: 700; line-height: 1.3;
    margin: 0 0 8px; color: var(--t-black);
  }
  .ctw-card-stage {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; padding: 3px 10px; border-radius: 12px;
    background: var(--t-blue-light); color: var(--t-blue);
    border: 1px solid var(--t-blue-stroke);
    font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    margin-bottom: 12px;
  }
  .ctw-section--honor   .ctw-card-stage { background: var(--t-amber-light); color: var(--t-amber-dark); border-color: var(--t-amber-stroke); }
  .ctw-section--ahead   .ctw-card-stage { background: var(--t-surface); color: var(--t-muted); border: 1px dashed var(--t-black-stroke); }

  .ctw-card-narrative {
    font-size: 14px; color: var(--t-text);
    line-height: 1.6; margin-bottom: 16px;
    flex: 1;
  }

  .ctw-card-funding {
    background: var(--t-surface);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 12.5px;
  }
  .ctw-fund-row {
    display: flex; justify-content: space-between;
    font-variant-numeric: tabular-nums;
  }
  .ctw-fund-row + .ctw-fund-row { margin-top: 4px; }
  .ctw-fund-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--t-muted); font-weight: 700;
  }
  .ctw-fund-value { color: var(--t-text); font-weight: 800; font-size: 13px; }
  .ctw-fund-bar {
    height: 6px; background: var(--t-border); border-radius: 999px;
    overflow: hidden; margin-top: 10px;
  }
  .ctw-fund-fill { height: 100%; background: var(--t-blue);
                    border-radius: 999px; transition: width .3s; }
  .ctw-section--honor .ctw-fund-fill { background: var(--t-amber); }
  .ctw-card.theme-green .ctw-fund-fill  { background: var(--t-green); }
  .ctw-card.theme-black .ctw-fund-fill  { background: var(--t-black); }

  .ctw-card-gap {
    font-weight: 800; color: var(--t-amber-dark);
    font-size: 14px; margin-bottom: 12px;
    padding: 8px 12px; background: var(--t-amber-light);
    border-radius: 6px; border-left: 3px solid var(--t-amber);
  }

  .ctw-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 18px; border-radius: 8px;
    background: var(--t-blue); color: #fff !important;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    margin-top: auto;
    transition: background .15s, transform .15s, box-shadow .15s;
  }
  .ctw-card-cta:hover {
    background: #003e6b;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
  .ctw-card.theme-green .ctw-card-cta { background: var(--t-green); }
  .ctw-card.theme-green .ctw-card-cta:hover { background: #006e35; }
  .ctw-card.theme-black .ctw-card-cta { background: var(--t-black); }
  .ctw-section--honor .ctw-card-cta { background: var(--t-amber); }
  .ctw-section--honor .ctw-card-cta:hover { background: #B45309; }
  .ctw-card-cta.is-givebutter { background: #EE5859 !important; color: #fff !important; }
  .ctw-card-cta.is-givebutter:hover { background: #D14A4B !important; }
  .ctw-cta-heart { font-size: 14px; line-height: 1; }

  .ctw-empty {
    padding: 32px 24px; text-align: center;
    background: var(--t-surface); border: 1px dashed var(--t-border);
    border-radius: var(--t-radius);
    color: var(--t-muted); font-size: 14px; line-height: 1.55;
  }

  /* ── Loading / error ───────────────────────────────────────────────── */
  .ctw-loading,
  .ctw-error {
    padding: 80px 20px; text-align: center;
    color: var(--t-muted); font-size: 15px;
  }
  .ctw-error { color: #b91c1c; }
  .ctw-error code {
    background: #fef2f2; padding: 2px 6px; border-radius: 4px;
    font-size: 12px;
  }

  /* ── Footer closing CTA — same pattern as deepdive .dd-closing ──── */
  .ctw-closing {
    margin-top: 56px; padding: 36px 28px;
    background: #fff;
    border-radius: var(--t-radius);
    border-top: 5px solid var(--t-black);
    box-shadow: var(--t-shadow);
    text-align: center;
  }
  .ctw-closing h3 {
    margin: 0 0 10px; font-size: 1.5rem;
    color: var(--t-black); font-weight: 800;
    text-transform: uppercase; letter-spacing: .5px;
  }
  .ctw-closing p {
    margin: 0 auto 18px; color: var(--t-muted);
    max-width: 600px; font-size: 15px;
  }
  .ctw-closing-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 26px;
    background: var(--t-black); color: #fff !important;
    text-decoration: none; border-radius: 8px;
    font-weight: 700; font-size: 14px;
    transition: transform .15s, box-shadow .15s;
  }
  .ctw-closing-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }

  /* ── Build chip (debug=1) ──────────────────────────────────────────── */
  #tenki-ctw .ctw-build-chip {
    position: absolute; top: 8px; right: 8px;
    background: #22c55e; color: #fff;
    font-family: monospace; font-size: 10px;
    padding: 3px 7px; border-radius: 4px;
    opacity: 0.85; z-index: 10;
  }

  @media (max-width: 600px) {
    #tenki-ctw { padding: 24px 16px 40px; }
    #tenki-ctw .ctw-grid { grid-template-columns: 1fr; }
    #tenki-ctw .ctw-section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    #tenki-ctw .ctw-page { padding: 24px 16px 40px; }
    /* iOS safe-area — extend bottom padding past the home indicator
       so the donate CTA card isn't covered by the gesture bar. */
    #tenki-ctw .ctw-page {
      padding-bottom: calc(40px + env(safe-area-inset-bottom, 0));
      padding-left:   max(16px, env(safe-area-inset-left, 0));
      padding-right:  max(16px, env(safe-area-inset-right, 0));
    }
    /* Hero CTA jump links wrap onto multiple lines on narrow screens */
    #tenki-ctw .ctw-jump { gap: 8px; }
    #tenki-ctw .ctw-jump a { padding: 8px 12px; font-size: 12.5px; }
  }