/* ============================================================
   URTH DESIGN SYSTEM v1.0 — COMPONENTS
   Requires tokens.css. Class prefix: ds-
   Contrast law: on forest bg use --urth-on-green / -muted only;
   on cream use --urth-text-primary / -muted only. No exceptions.
   Every interactive target >= var(--urth-touch-min).
   ============================================================ */

/* ---- base surfaces ---- */
.ds-workspace{margin:0;background:var(--urth-forest-700);color:var(--urth-on-green);font-family:var(--urth-font-body);font-size:var(--urth-fs-body);line-height:var(--urth-lh-body)}
.ds-document{margin:0;background:var(--urth-cream-100);color:var(--urth-text-primary);font-family:var(--urth-font-body);font-size:var(--urth-fs-body);line-height:var(--urth-lh-body)}
.ds-h1,.ds-h2,.ds-h3,.ds-display{font-family:var(--urth-font-display);font-weight:600;line-height:var(--urth-lh-tight);margin:0}
.ds-display{font-size:var(--urth-fs-display)} .ds-h1{font-size:var(--urth-fs-h1)} .ds-h2{font-size:var(--urth-fs-h2)} .ds-h3{font-size:var(--urth-fs-h3)}
.ds-workspace .ds-h1,.ds-workspace .ds-h2,.ds-workspace .ds-h3,.ds-workspace .ds-display{color:var(--urth-on-green)}
.ds-card .ds-h1,.ds-card .ds-h2,.ds-card .ds-h3,.ds-document .ds-h1,.ds-document .ds-h2,.ds-document .ds-h3{color:var(--urth-forest-900)}
.ds-muted{color:var(--urth-text-muted)} .ds-workspace .ds-muted{color:var(--urth-on-green-muted)}
.ds-card .ds-muted{color:var(--urth-text-muted)}

/* ---- card / panel ---- */
.ds-card{background:var(--urth-cream-50);color:var(--urth-text-primary);border:1px solid var(--urth-line);border-radius:var(--urth-r-lg);box-shadow:var(--urth-shadow-1);padding:var(--urth-s-4)}
.ds-card--flush{padding:0;overflow:hidden}
.ds-section{margin:var(--urth-s-6) 0 var(--urth-s-3)}

/* ---- buttons (one system) ---- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--urth-s-2);min-height:var(--urth-touch-min);padding:0 var(--urth-s-5);border:none;border-radius:var(--urth-r-pill);font-family:var(--urth-font-body);font-weight:600;font-size:var(--urth-fs-small);text-decoration:none;cursor:pointer;transition:var(--urth-ease);white-space:nowrap}
.ds-btn:focus-visible{outline:none;box-shadow:var(--urth-focus)}
.ds-btn--primary{background:var(--urth-gold-500);color:var(--urth-on-gold)}          /* the ONE dominant action (New Lead) */
.ds-btn--green{background:var(--urth-forest-700);color:var(--urth-on-green)}
.ds-btn--green:hover{background:var(--urth-forest-900)}
.ds-btn--quiet{background:transparent;color:var(--urth-forest-700);border:1.5px solid var(--urth-forest-700)}
.ds-workspace .ds-btn--quiet{color:var(--urth-on-green);border-color:var(--urth-line-on-green)}
.ds-btn--danger{background:var(--urth-danger-600);color:var(--urth-cream-50)}
.ds-btn[disabled],.ds-btn--off{background:var(--urth-cream-100);color:var(--urth-text-muted);pointer-events:none}

/* ---- confidence badges (fixed meanings — never repurpose) ---- */
.ds-q{display:inline-flex;align-items:center;gap:6px;border-radius:var(--urth-r-pill);padding:3px 12px;font-size:var(--urth-fs-micro);font-weight:700;letter-spacing:.02em}
.ds-q--1{background:var(--urth-q1);color:var(--urth-on-q1)}
.ds-q--2{background:var(--urth-q2);color:var(--urth-on-q2)}
.ds-q--3{background:var(--urth-q3);color:var(--urth-on-q3)}
.ds-q--expired{background:var(--urth-cream-100);color:var(--urth-danger-600);border:1px solid var(--urth-danger-600)}
/* client documents NEVER show internal Q colors — use the neutral variant */
.ds-q--client{background:var(--urth-cream-100);color:var(--urth-text-primary);border:1px solid var(--urth-line)}

/* ---- chips / status ---- */
.ds-chip{display:inline-block;background:var(--urth-cream-100);border:1px solid var(--urth-line);color:var(--urth-text-primary);border-radius:var(--urth-r-pill);padding:3px 11px;font-size:var(--urth-fs-micro);font-weight:600}
.ds-chip--gold{background:var(--urth-gold-500);color:var(--urth-on-gold);border-color:var(--urth-gold-500)}
.ds-chip--danger{color:var(--urth-danger-600);border-color:var(--urth-danger-600)}

/* ---- forms ---- */
.ds-label{display:block;font-size:var(--urth-fs-small);font-weight:600;color:var(--urth-forest-700);margin:0 0 var(--urth-s-1)}
.ds-workspace .ds-label{color:var(--urth-on-green)}
.ds-input,.ds-select,.ds-textarea{width:100%;box-sizing:border-box;min-height:var(--urth-touch-min);background:var(--urth-cream-50);border:1px solid var(--urth-line);border-radius:var(--urth-r-sm);padding:var(--urth-s-3);font-family:var(--urth-font-body);font-size:var(--urth-fs-body);color:var(--urth-text-primary)}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{outline:none;box-shadow:var(--urth-focus);border-color:var(--urth-gold-500)}
.ds-field{margin-bottom:var(--urth-s-4)}
.ds-help{font-size:var(--urth-fs-micro);color:var(--urth-text-muted);margin-top:var(--urth-s-1)}
.ds-error{font-size:var(--urth-fs-micro);color:var(--urth-danger-600);margin-top:var(--urth-s-1)}

/* ---- data rows (dense lists: properties, leads, suppliers) ---- */
.ds-rows{display:flex;flex-direction:column}
.ds-row{display:flex;align-items:center;gap:var(--urth-s-3);min-height:var(--urth-touch-min);padding:var(--urth-s-3) var(--urth-s-4);border-bottom:1px solid var(--urth-line);color:var(--urth-text-primary);text-decoration:none;background:var(--urth-cream-50);transition:var(--urth-ease)}
.ds-row:hover{background:var(--urth-cream-100)}
.ds-row .ds-row-main{flex:1;min-width:0}
.ds-row .ds-row-title{font-weight:600;color:var(--urth-forest-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-row .ds-row-sub{font-size:var(--urth-fs-micro);color:var(--urth-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-row .ds-row-end{flex:0 0 auto;display:flex;align-items:center;gap:var(--urth-s-2)}

/* ---- empty state (honest: never fake data) ---- */
.ds-empty{padding:var(--urth-s-8) var(--urth-s-4);text-align:center;color:var(--urth-text-muted)}
.ds-empty .ds-empty-title{font-family:var(--urth-font-display);font-size:var(--urth-fs-h3);color:var(--urth-text-primary);margin-bottom:var(--urth-s-1)}

/* ---- drawer (detail panel) ---- */
.ds-drawer-ov{position:fixed;inset:0;z-index:300;background:rgba(29,67,49,.35);display:none}
.ds-drawer-ov.on{display:block}
.ds-drawer{position:fixed;top:0;right:0;bottom:0;z-index:301;width:min(440px,94vw);background:var(--urth-cream-50);box-shadow:var(--urth-shadow-3);transform:translateX(102%);transition:transform .22s ease;overflow-y:auto;padding:var(--urth-s-5)}
.ds-drawer.on{transform:none}

/* ---- app shell ---- */
.ds-shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.ds-sidebar{background:var(--urth-forest-900);color:var(--urth-on-green);padding:var(--urth-s-4) var(--urth-s-2);display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;box-sizing:border-box}
.ds-sidebar .ds-side-logo{display:flex;align-items:center;padding:var(--urth-s-2) var(--urth-s-3) var(--urth-s-4)}
.ds-sidebar .ds-side-logo img{height:30px;width:auto}
.ds-side-link{display:flex;align-items:center;gap:var(--urth-s-3);min-height:var(--urth-touch-min);padding:0 var(--urth-s-3);border-radius:var(--urth-r-md);color:var(--urth-on-green);text-decoration:none;font-weight:500;font-size:var(--urth-fs-small)}
.ds-side-link:hover{background:rgba(255,253,247,.08)}
.ds-side-link.on{background:rgba(255,253,247,.12);font-weight:700;box-shadow:inset 3px 0 0 var(--urth-gold-500)}
.ds-main{min-width:0;display:flex;flex-direction:column}
.ds-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:var(--urth-s-3);min-height:60px;padding:0 var(--urth-s-5);background:var(--urth-forest-700);border-bottom:1px solid var(--urth-line-on-green)}
.ds-topbar .ds-top-title{flex:1;font-family:var(--urth-font-display);font-weight:600;font-size:var(--urth-fs-h2);color:var(--urth-on-green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-content{flex:1;padding:var(--urth-s-5);max-width:1080px;width:100%;box-sizing:border-box;margin:0 auto}

/* ---- mobile: bottom bar (5 items max) ---- */
.ds-bottombar{display:none}
@media (max-width:900px){
  .ds-shell{grid-template-columns:1fr}
  .ds-sidebar{display:none}
  .ds-content{padding:var(--urth-s-4) var(--urth-s-4) calc(var(--urth-s-12) + var(--urth-s-8))}
  .ds-bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--urth-forest-900);border-top:1px solid var(--urth-line-on-green);padding:var(--urth-s-1) var(--urth-s-2) calc(var(--urth-s-1) + env(safe-area-inset-bottom))}
  .ds-bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--urth-touch-min);color:var(--urth-on-green-muted);text-decoration:none;font-size:var(--urth-fs-micro);font-weight:600;border-radius:var(--urth-r-md)}
  .ds-bottombar a.on{color:var(--urth-gold-500)}
  .ds-bottombar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* ---- tables (documents/sheets) ---- */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--urth-fs-small)}
.ds-table th{text-align:left;font-family:var(--urth-font-body);font-weight:700;color:var(--urth-forest-900);border-bottom:2px solid var(--urth-forest-700);padding:var(--urth-s-2) var(--urth-s-3)}
.ds-table td{border-bottom:1px solid var(--urth-line);padding:var(--urth-s-2) var(--urth-s-3);color:var(--urth-text-primary);vertical-align:top}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- print (SHEET template) ---- */
@media print{
  .ds-sidebar,.ds-bottombar,.ds-topbar,.ds-noprint{display:none!important}
  .ds-document,.ds-workspace{background:var(--urth-cream-50)!important;color:var(--urth-text-primary)!important}
  .ds-card{box-shadow:none;border:1px solid var(--urth-line)}
}