/* Brand tokens */
:root{
  --color-teal:#0cb3a3; --color-teal-dark:#0a857a; --color-green:#27c389; --color-bg:#f6fbfa; --color-text:#0c1c22; --color-muted:#5f6c72; --color-border:#e3efed; --color-white:#ffffff;
  --radius:12px; --radius-sm:8px; --shadow:0 6px 20px rgba(12,179,163,.15);
}

/* Layout */
.container{ width: min(1100px, 92%); margin: 0 auto; }
.site-header{ background: var(--color-white); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 20; }
.site-header .brand{ display:inline-block; padding:16px 0; color: var(--color-teal-dark); font-weight: 700; text-decoration:none; }

/* Sidebar layout */
.layout-with-sidebar{ display: flex; gap: 0; min-height: 70vh; }
.sidebar{ width: 240px; background: var(--color-white); border-right: 1px solid var(--color-border); padding: 20px 0; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.sidebar-nav{ list-style: none; margin: 0; padding: 0; }
.sidebar-nav a{ display: flex; align-items: center; padding: 12px 20px; color: var(--color-text); text-decoration: none; transition: background 0.2s; }
.sidebar-nav a:hover, .sidebar-nav a.active{ background: var(--color-bg); border-left: 3px solid var(--color-teal); }
.sidebar-nav a.active{ font-weight: 600; }
.main-content{ flex: 1; padding: 24px; background: var(--color-bg); }

.site-main{ background: var(--color-bg); }
.site-main.no-padding{ padding: 0; }
.site-footer{ border-top: 1px solid var(--color-border); background: #fff; }
.site-footer .container{ padding: 24px 0; color: var(--color-muted); }

/* Cards */
.card{ background: var(--color-white); border:1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header{ padding:14px 16px; border-bottom:1px solid var(--color-border); font-weight:600; color: var(--color-text); }
.card-body{ padding:16px; }

/* Buttons */
.btn{ appearance:none; border:none; border-radius: 10px; padding:10px 14px; background: var(--color-teal); color: #fff; cursor:pointer; font-weight:600; }
.btn:hover{ background: var(--color-teal-dark); }
.btn.secondary{ background: #eef7f6; color: var(--color-teal-dark); }
.btn.link{ background: transparent; color: var(--color-teal-dark); padding: 0; }

/* Forms */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field input, .field select, .field textarea{ border:1px solid var(--color-border); border-radius:10px; padding:10px 12px; background:#fff; color: var(--color-text); }

/* Timeline builder UI atoms (reusable later) */
.timeline{ display:grid; gap:12px; }
.phase{ border-left: 4px solid var(--color-teal); }
.phase .card-header{ display:flex; align-items:center; justify-content:space-between; }
.task-list{ display:grid; gap:8px; margin-top:8px; }
.task{ border-left: 4px solid var(--color-green); }
.draggable{ cursor: move; }

/* Utilities */
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.col{ flex:1 1 280px; }
.stack-sm{ display:grid; gap:8px; }
.stack{ display:grid; gap:12px; }
.stack-lg{ display:grid; gap:20px; }
.muted{ color: var(--color-muted); }