/* public-registry.css v5 — 2026-06-08 */
/* Forward QET badge */
    .fwd-badge {
      display:inline-flex;align-items:center;gap:3px;
      font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
      color:#92600a;background:rgba(237,165,28,.15);
      border:1px solid rgba(237,165,28,.35);
      padding:1px 6px;border-radius:20px;vertical-align:middle;margin-left:4px;
    }
/* ============================================================
   Greentruth Registry — Project Page Styles
   toro-energy-of-california-waste-management-cold-canyon.css
   ============================================================ */

/* ── Page Layout & Components ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --almost-black:  #141D19;
      --muted-olive:   #686B61;
      --sage-gray:     #A0A691;
      --warm-cream:    #E9E9D7;
      --off-white:     #F5F5ED;
      --light-lime:    #F7FBEB;
      --teal:          #8BE4E3;
      --teal-light:    #C5F2EE;
      --amber:         #EDA51C;
      --amber-dark:    #b87d10;
      --coral:         #E66547;
      --burnt-orange:  #C84324;
      --font: 'DM Sans', sans-serif;
      --mono: 'DM Mono', monospace;
    }

    html, body { height: 100%; }
    body {
      font-family: var(--font);
      background: var(--off-white);
      color: var(--almost-black);
      line-height: 1.6;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
    }

    /* NAV — white */
    nav {
      background: #fff;
      border-bottom: 1px solid var(--warm-cream);
      padding: 0 24px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .nav-logo {
      display: flex; align-items: center;
      text-decoration: none; line-height: 0;
    }
    .nav-actions { display: flex; align-items: center; gap: 8px; }
    .btn-ghost {
      padding: 6px 14px; border-radius: 6px;
      font-size: 13px; font-weight: 500; font-family: var(--font);
      cursor: pointer; border: 1px solid var(--warm-cream);
      background: transparent; color: var(--muted-olive);
      transition: border-color .15s, color .15s;
      text-decoration: none; display: inline-block;
    }
    .btn-ghost:hover { border-color: var(--sage-gray); color: var(--almost-black); }
    .btn-primary {
      padding: 6px 16px; border-radius: 6px;
      font-size: 13px; font-weight: 600; font-family: var(--font);
      cursor: pointer; border: none;
      background: #155C3A; color: #fff;
      transition: background .15s;
      text-decoration: none; display: inline-block;
    }
    .btn-primary:hover { background: #0e3d27; }

    /* BREADCRUMB */
    .breadcrumb {
      padding: 9px 24px;
      background: #fff;
      border-bottom: 1px solid var(--warm-cream);
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--muted-olive);
    }
    .breadcrumb a { color: var(--amber); text-decoration: none; }
    .breadcrumb a:hover { color: var(--amber-dark); }
    .breadcrumb-sep { color: var(--warm-cream); width: 14px; height: 14px; flex-shrink: 0; }

    /* PAGE LAYOUT */
    .page-wrapper {
      max-width: 1080px; margin: 0 auto;
      padding: 28px 24px 72px;
      display: grid; grid-template-columns: 1fr 296px;
      gap: 24px; align-items: start;
    }
    .main-col { display: flex; flex-direction: column; gap: 16px; }

    /* CARDS */
    .card {
      background: #fff;
      border: 1px solid var(--warm-cream);
      border-radius: 10px; overflow: hidden;
    }
    .project-header { padding: 24px; border-bottom: 1px solid var(--warm-cream); }
    .project-header-top {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 12px; margin-bottom: 12px;
    }
    .project-id {
      font-family: var(--mono); font-size: 11px;
      color: var(--sage-gray); background: var(--off-white);
      padding: 2px 8px; border-radius: 4px; letter-spacing: .03em;
      border: 1px solid var(--warm-cream);
    }
    .status-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 500; padding: 3px 10px;
      border-radius: 99px;
      background: #fdf3d8; color: #7a4e00;
      border: 1px solid #f5d98a;
    }
    .status-badge::before {
      content: ''; width: 6px; height: 6px;
      border-radius: 50%; background: #155C3A;
    }
    h1.project-title {
      font-size: 22px; font-weight: 600; color: var(--almost-black);
      line-height: 1.3; margin-bottom: 4px;
    }
    .project-subtitle { font-size: 13px; color: var(--muted-olive); margin-bottom: 16px; }
    .tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 500; padding: 3px 9px;
      border-radius: 99px; border: 1px solid var(--warm-cream);
      color: var(--muted-olive); background: var(--off-white);
    }
    .tag svg { width: 11px; height: 11px; }
    .tag-rng     { background: #fdf3d8; color: #7a4e00; border-color: #f5d98a; }
    .tag-upstream{ background: var(--light-lime); color: var(--muted-olive); border-color: var(--warm-cream); }
    .tag-qet     { background: var(--teal-light); color: #1a5554; border-color: var(--teal); }
    .tag-landfill{ background: var(--off-white); color: var(--muted-olive); border-color: var(--warm-cream); }
    .tag-ghgp    { background: #fdf3d8; color: #7a4e00; border-color: #f5d98a; }

    /* META GRID */
    .meta-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--warm-cream); }
    .meta-item {
      padding: 14px 20px;
      border-right: 1px solid var(--warm-cream);
      border-bottom: 1px solid var(--warm-cream);
    }
    .meta-item:nth-child(even) { border-right: none; }
    .meta-item:nth-last-child(-n+2) { border-bottom: none; }
    .meta-label {
      font-size: 10px; font-weight: 600; color: var(--sage-gray);
      text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px;
    }
    .meta-value {
      font-size: 13px; font-weight: 500; color: var(--almost-black);
      display: flex; align-items: center; gap: 5px;
    }
    .meta-value svg { width: 13px; height: 13px; color: var(--sage-gray); flex-shrink: 0; }

    /* DESCRIPTION */
    .section-card { padding: 20px 24px; }
    .section-title {
      font-size: 11px; font-weight: 600; color: var(--sage-gray);
      text-transform: uppercase; letter-spacing: .07em;
      margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
    }
    .section-title::after { content: ''; flex: 1; height: 1px; background: var(--warm-cream); }
    .description-text { font-size: 13px; color: var(--muted-olive); line-height: 1.75; }

    /* VINTAGES TABLE */
    .vintages-header {
      padding: 14px 20px; border-bottom: 1px solid var(--warm-cream);
      display: flex; align-items: center; justify-content: space-between;
    }
    .vintage-dynamic { } /* updated dynamically via JS */
    .vintage-count {
      font-size: 11px; font-weight: 500;
      color: #7a4e00; background: #fdf3d8;
      padding: 2px 9px; border-radius: 99px; border: 1px solid #f5d98a;
    }
    .table-head {
      display: grid; grid-template-columns: 3fr 2fr 3fr 2fr 80px;
      gap: 8px; padding: 8px 20px;
      background: var(--off-white); border-bottom: 1px solid var(--warm-cream);
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: .07em; color: var(--sage-gray);
    }
    .table-row {
      display: grid; grid-template-columns: 3fr 2fr 3fr 2fr 80px;
      gap: 8px; padding: 10px 20px;
      border-bottom: 1px solid var(--warm-cream);
      align-items: center; transition: background .1s;
    }
    .table-row:last-child { border-bottom: none; }
    .table-row:hover { background: var(--off-white); }
    .vintage-label { font-size: 13px; font-weight: 500; color: var(--almost-black); }
    .avail-vol { font-size: 13px; color: var(--muted-olive); font-variant-numeric: tabular-nums; }
    .avail-vol span { font-size: 11px; color: var(--sage-gray); margin-left: 2px; }
    .price-tag { font-size: 13px; font-weight: 600; color: var(--almost-black); font-variant-numeric: tabular-nums; text-align: right; }
    .qty-input-wrap { position: relative; }
    .qty-input {
      width: 100%; padding: 5px 38px 5px 8px;
      border: 1px solid var(--warm-cream); border-radius: 6px;
      font-size: 12px; font-family: var(--font); color: var(--almost-black);
      background: #fff; transition: border-color .15s, box-shadow .15s; outline: none;
    }
    .qty-input:focus { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(237,165,28,.15); }
    .qty-unit {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      font-size: 10px; color: var(--sage-gray); pointer-events: none; font-family: var(--mono);
    }
    .btn-details {
      padding: 5px 10px; border-radius: 6px;
      font-size: 11px; font-weight: 600; font-family: var(--font);
      cursor: pointer; border: 1px solid var(--warm-cream);
      color: var(--muted-olive); background: var(--off-white);
      transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
    }
    .btn-details:hover { background: var(--almost-black); color: var(--off-white); border-color: var(--almost-black); }

    .table-footer {
      padding: 12px 20px; background: var(--off-white);
      border-top: 1px solid var(--warm-cream);
      display: flex; align-items: center; justify-content: space-between;
    }
    .footer-hint { font-size: 12px; color: var(--sage-gray); }
    .btn-add-cart {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 16px; border-radius: 7px;
      font-size: 12px; font-weight: 600; font-family: var(--font);
      cursor: pointer; border: none;
      background: #155C3A; color: #fff;
      transition: background .15s;
    }
    .btn-add-cart:disabled { background: var(--warm-cream); color: var(--sage-gray); cursor: not-allowed; }
    .btn-add-cart:not(:disabled):hover { background: #a83620; }
    .btn-add-cart svg { width: 13px; height: 13px; }

    /* SIDEBAR */
    .sidebar { display: flex; flex-direction: column; gap: 16px; }

    .summary-card { background: #fff; border: 1px solid var(--warm-cream); border-radius: 10px; overflow: hidden; }
    .summary-header { padding: 20px; background: #fff; border-bottom: 1px solid var(--warm-cream); }
    .summary-header p { font-size: 11px; color: var(--sage-gray); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
    .summary-total { font-size: 30px; font-weight: 600; color: var(--almost-black); line-height: 1; }
    .summary-unit { font-size: 13px; color: var(--muted-olive); margin-top: 3px; }
    .summary-body { padding: 16px 20px; }
    .summary-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 7px 0; border-bottom: 1px solid var(--warm-cream); font-size: 13px;
    }
    .summary-row:last-child { border-bottom: none; }
    .summary-row-label { color: var(--muted-olive); }
    .summary-row-val { font-weight: 500; color: var(--almost-black); }
    .summary-row-val.green { color: #1a6b42; }
    .summary-cta { padding: 14px 20px; border-top: 1px solid var(--warm-cream); background: var(--off-white); }
    .btn-cta {
      width: 100%; padding: 11px; border-radius: 8px;
      font-size: 14px; font-weight: 600; font-family: var(--font);
      cursor: pointer; border: none;
      background: #155C3A; color: #fff;
      transition: background .15s; text-decoration: none; display: block; text-align: center;
    }
    .btn-cta:hover { background: #0e3d27; }
    .btn-cta-secondary {
      width: 100%; margin-top: 8px; padding: 9px; border-radius: 8px;
      font-size: 13px; font-weight: 500; font-family: var(--font);
      cursor: pointer; border: 1px solid var(--warm-cream);
      background: #fff; color: var(--muted-olive);
      transition: background .15s, border-color .15s;
      text-decoration: none; display: block; text-align: center;
    }
    .btn-cta-secondary:hover { background: var(--off-white); border-color: var(--sage-gray); }
    .cta-note { margin-top: 10px; font-size: 11px; color: var(--sage-gray); text-align: center; line-height: 1.5; }

    .cert-card { background: #fff; border: 1px solid var(--warm-cream); border-radius: 10px; padding: 16px 20px; }
    .cert-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--warm-cream); font-size: 12px; }
    .cert-item:last-child { border-bottom: none; }
    .cert-icon {
      width: 28px; height: 28px; border-radius: 6px;
      background: #fdf3d8; border: 1px solid #f5d98a;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .cert-icon svg { width: 14px; height: 14px; color: var(--amber-dark); }
    .cert-name { font-weight: 500; color: var(--almost-black); }
    .cert-desc { color: var(--sage-gray); font-size: 11px; }

    .price-range-card { background: #fff; border: 1px solid var(--warm-cream); border-radius: 10px; padding: 16px 20px; }
    .price-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
    .price-label { color: var(--muted-olive); }
    .price-val { font-weight: 600; color: var(--almost-black); font-variant-numeric: tabular-nums; }
    .price-track { margin-top: 10px; height: 3px; background: var(--warm-cream); border-radius: 99px; position: relative; overflow: hidden; }
    .price-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #f5d98a, var(--amber)); border-radius: 99px; }

    .registry-badge {
      background: #fff; border: 1px solid var(--warm-cream);
      border-radius: 10px; padding: 14px 20px;
      display: flex; align-items: center; gap: 12px; font-size: 12px;
    }
    .registry-badge-icon {
      width: 34px; height: 34px; border-radius: 8px;
      background: #fdf3d8; border: 1px solid #f5d98a;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .registry-badge-icon svg { width: 17px; height: 17px; color: var(--amber-dark); }
    .registry-badge-title { font-weight: 600; color: var(--amber); margin-bottom: 1px; }
    .registry-badge-sub { color: var(--muted-olive); font-size: 11px; }

    footer {
      background: #fff; border-top: 1px solid var(--warm-cream);
      padding: 20px 24px; display: flex; align-items: center;
      justify-content: space-between; font-size: 12px; color: var(--muted-olive);
    }
    footer a { color: var(--muted-olive); text-decoration: none; }
    footer a:hover { color: var(--almost-black); }

    @media (max-width: 768px) {
      .page-wrapper { grid-template-columns: 1fr; }
      .sidebar { order: -1; }
      .meta-grid { grid-template-columns: 1fr; }
      .meta-item { border-right: none; }
      .meta-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--warm-cream); }
      .meta-item:last-child { border-bottom: none; }
      .table-head, .table-row { grid-template-columns: 3fr 2fr 2fr 1fr; }
      .table-head > :nth-child(3), .table-row > :nth-child(3) { display: none; }
    }
  
    .price-confidential {
      filter: blur(5px);
      user-select: none;
      cursor: default;
      transition: filter 0.15s;
    }
    .price-confidential:hover {
      filter: blur(5px);
    }
    .price-confidential [style*="filter:none"] {
      filter: none !important;
    }

/* ── Vintage Detail Drawer ─────────────────────────────────── */
/* DRAWER */
    .d-h4 { font-size:14px; font-weight:600; color:#141D19; margin-bottom:14px; }
    .d-divider { height:1px; background:#E9E9D7; margin:24px 0; }
    .d-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .d-info-cell {
      display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
      background:#F5F5ED; border:1px solid #E9E9D7; border-radius:8px;
      transition:border-color .15s, transform .15s; cursor:default;
    }
    .d-info-cell:hover { border-color:#A0A691; transform:translateY(-1px); }
    .d-info-cell svg { width:14px;height:14px;color:#A0A691;margin-top:1px;flex-shrink:0; }
    .d-info-label { font-size:11px;color:#A0A691;margin-bottom:2px; }
    .d-info-val { font-size:13px;font-weight:500;color:#141D19; }
    .d-info-sub { font-size:11px;color:#A0A691;margin-top:1px; }

    .d-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
    .d-stat { padding:10px 12px; border-radius:8px; border:1px solid #E9E9D7; transition:transform .15s; cursor:default; }
    .d-stat:hover { transform:translateY(-1px); }
    .d-stat-label { font-size:10px;color:#686B61;margin-bottom:4px; }
    .d-stat-val { font-size:17px;font-weight:600;line-height:1.2;color:#141D19; }
    .d-stat-unit { font-size:10px;color:#A0A691;margin-top:2px; }
    .d-stat-emerald { background:#fdf3d8; border-color:#f5d98a; }
    .d-stat-emerald .d-stat-val { color:#7a4e00; }
    .d-stat-green { background:#edfaf5; border-color:#a8e6cf; }
    .d-stat-green .d-stat-val { color:#1a6b42; }
    .d-stat-teal { background:#e0f9f8; border-color:#8BE4E3; }
    .d-stat-teal .d-stat-val { color:#1a5554; }
    .d-stat-blue { background:#F5F5ED; border-color:#E9E9D7; }
    .d-stat-gray { background:#F5F5ED; border-color:#E9E9D7; }

    .d-emission-row {
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 10px; border-radius:7px; background:#F5F5ED;
      margin-bottom:4px; border:1px solid transparent; transition:border-color .15s;
    }
    .d-emission-row:hover { border-color:#E9E9D7; }
    .d-emission-left { display:flex;align-items:center;gap:7px;font-size:13px;color:#141D19; }
    .d-emission-left svg { width:13px;height:13px;flex-shrink:0; }

    .d-table { width:100%; border-collapse:collapse; font-size:12px; }
    .d-table thead tr { background:#F5F5ED; }
    .d-table th { padding:7px 10px; text-align:left; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#A0A691; }
    .d-table td { padding:7px 10px; border-top:1px solid #E9E9D7; color:#686B61; }
    .d-table td:nth-child(2) { text-align:left; font-weight:500; font-variant-numeric:tabular-nums; color:#141D19; }
    .d-table tbody tr:hover td { background:#F5F5ED; }

    .d-transport-grid { border-radius:8px; border:1px solid #f5d98a; background:#fdf3d8; overflow:hidden; }
    .d-transport-row { display:flex; justify-content:space-between; align-items:flex-start; padding:9px 14px; border-bottom:1px solid #f5d98a; transition:background .1s; }
    .d-transport-row:last-child { border-bottom:none; }
    .d-transport-row:hover { background:#fae8a0; }
    .d-transport-label { font-size:11px; color:#686B61; }
    .d-transport-val { font-size:12px; font-weight:500; color:#141D19; text-align:right; max-width:55%; }

    .d-lifecycle-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
    .d-lifecycle-cell {
      padding:10px 12px; border-radius:10px;
      background:#F5F5ED; border:1px solid #E9E9D7;
      transition:border-color .15s, transform .15s; cursor:default;
    }
    .d-lifecycle-cell:hover { border-color:#A0A691; transform:translateY(-1px); }
    .d-lifecycle-label { font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#A0A691;margin-bottom:6px; }

    .d-id-grid { border-radius:10px; border:1px solid #E9E9D7; overflow:hidden; margin-bottom:16px; }
    .d-id-row { display:flex;align-items:center;gap:10px;padding:9px 14px;background:#fff;border-bottom:1px solid #E9E9D7; }
    .d-id-row:last-child { border-bottom:none; }
    .d-id-row svg { width:13px;height:13px;color:#A0A691;flex-shrink:0; }
    .d-id-label { font-size:11px;color:#A0A691;width:68px;flex-shrink:0; }
    .d-id-val { font-family:'DM Mono',monospace;font-size:11px;color:#686B61;cursor:pointer;transition:color .15s; }
    .d-id-val:hover { color:#141D19; }

    .d-timestamp { display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#F5F5ED;border:1px solid #E9E9D7;border-radius:7px;font-size:11px;margin-right:6px;margin-bottom:6px;transition:border-color .15s; }
    .d-timestamp:hover { border-color:#A0A691; }
    .d-timestamp svg { width:11px;height:11px;color:#A0A691; }
    .d-timestamp-label { color:#A0A691; }
    .d-timestamp-val { font-weight:500;color:#141D19; }

    .d-badge-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; }
    .d-badge {
      display:inline-flex;align-items:center;gap:5px;
      padding:3px 10px;border-radius:99px;font-size:11px;font-weight:500;
      background:#F5F5ED; border:1px solid #E9E9D7; color:#141D19;
    }
    .d-badge svg { width:11px;height:11px; }
    .d-badge-blue    { background:#fdf3d8; border-color:#f5d98a; color:#7a4e00; }
    .d-badge-emerald { background:#fdf3d8; border-color:#f5d98a; color:#7a4e00; }
    .d-badge-sky     { background:#F7FBEB; border-color:#E9E9D7; color:#686B61; }
    .d-badge-lime    { background:#F7FBEB; border-color:#E9E9D7; color:#686B61; }
    .d-badge-amber   { background:#fdf3d8; border-color:#f5d98a; color:#7a4e00; }

    .d-approval {
      display:flex;align-items:center;justify-content:space-between;
      padding:10px 12px;border-radius:8px;background:#fdf3d8;border:1px solid #f5d98a;
      transition:box-shadow .15s;
    }
    .d-approval:hover { box-shadow:0 2px 8px rgba(20,29,25,.06); }
    .d-approval-left { display:flex;align-items:center;gap:10px; }
    .d-approval-left svg { width:15px;height:15px;color:#b87d10;flex-shrink:0; }
    .d-compliance-badge {
      display:inline-flex;align-items:center;
      padding:3px 10px;border-radius:99px;
      font-size:11px;font-weight:600;
      border:1px solid #E9E9D7;color:#686B61;background:#F5F5ED;
      margin:2px;transition:background .15s;cursor:default;
    }
    .d-compliance-badge:hover { background:#E9E9D7; }

    @keyframes fadeSlideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
    .d-section { animation: fadeSlideUp .3s ease both; }

    @media (max-width:640px) {
      .d-stat-grid { grid-template-columns:repeat(2,1fr); }
      .d-lifecycle-grid { grid-template-columns:repeat(2,1fr); }
      .d-info-grid { grid-template-columns:1fr; }
    }