/* =========================================================
   @cal/ui — Components. Mirrors the live askcal.io component set:
   sharp buttons (green / ghost with hover-invert), green square
   bullets, the italic-green surface tag, hairline sections.
   Import AFTER tokens.css + base.css.
   ========================================================= */

/* ---------- Buttons (live .btn / .btn-green / .btn-ghost) ---------- */
.cal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cal-space-2);
  font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1;
  padding: 13px 22px;
  border: 1px solid var(--cal-fg);
  border-radius: 0;                 /* sharp */
  background: transparent; color: var(--cal-fg);
  cursor: pointer;
  transition: all var(--cal-transition-fast);
}
.cal-btn:hover { background: var(--cal-fg); color: var(--cal-bg); }   /* ghost invert */
.cal-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cal-btn:disabled:hover { background: transparent; color: var(--cal-fg); }

/* Primary = the green button. Same green as a "funded" tag, by choice. */
.cal-btn--primary {
  background: var(--green); border-color: var(--green); color: var(--paper);
}
.cal-btn--primary:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); }

.cal-btn--ghost { border-color: transparent; color: var(--cal-fg-muted); }
.cal-btn--ghost:hover { background: var(--cal-bg-sunken); color: var(--cal-fg); }

/* ---------- Inputs ---------- */
.cal-field { display: flex; flex-direction: column; gap: var(--cal-space-2); }
.cal-label { font-size: var(--cal-text-body-sm); font-weight: 500; color: var(--cal-fg-muted); }
.cal-input, .cal-textarea {
  font-family: var(--sans); font-size: var(--cal-text-body);
  color: var(--cal-fg); background: var(--cal-bg-raised);
  border: 1px solid var(--cal-border); border-radius: 0;
  padding: var(--cal-space-3) var(--cal-space-4);
  transition: border-color var(--cal-transition-fast);
}
.cal-input::placeholder, .cal-textarea::placeholder { color: var(--cal-fg-subtle); }
.cal-input:focus-visible, .cal-textarea:focus-visible {
  outline: 2px solid var(--focus, #1E5FA6); outline-offset: 2px; border-color: var(--cal-accent); }
.cal-textarea { resize: vertical; min-height: var(--cal-space-8); line-height: 1.5; }
.cal-input[aria-invalid="true"], .cal-textarea[aria-invalid="true"] { border-color: var(--cal-action); }
.cal-help { font-size: var(--cal-text-caption); color: var(--cal-fg-subtle); }
.cal-help--error { color: var(--cal-action); }

/* ---------- Section (hairline) + card ---------- */
.cal-section { padding-block: var(--cal-space-6); border-top: 1px solid var(--cal-border); }
.cal-card { background: var(--cal-bg); border: 1px solid var(--cal-border); border-radius: 0;
  padding: var(--cal-space-5); transition: background var(--cal-transition-base); }
.cal-card:hover { background: var(--cal-bg-sunken); }

/* The italic-green surface tag ("Calm. Live. After-hours.") */
/* Brand v3: green is a marker, never a letter. The tag keeps its meaning
   through a green rule with the word left at ink. */
.cal-surface-tag { font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--cal-fg); padding-left: 8px; border-left: 3px solid var(--green); }

/* ---------- Green square bullets (live .surface-list) ---------- */
.cal-list { list-style: none; padding: 0; margin: 0; }
.cal-list li { position: relative; padding: 7px 0 7px 18px; font-size: var(--cal-text-body-sm);
  color: var(--cal-fg-muted); line-height: 1.5; }
.cal-list li::before { content: ''; position: absolute; left: 0; top: 13px;
  width: 7px; height: 7px; background: var(--green); }   /* square, not round */

/* ---------- Status (round dot is the one exception to sharp) ---------- */
.cal-status { display: inline-flex; align-items: center; gap: var(--cal-space-2);
  font-size: var(--cal-text-caption); font-weight: 500; color: var(--cal-fg-muted); }
.cal-status .dot { width: 8px; height: 8px; border-radius: var(--cal-radius-full); }
.cal-status--approved .dot { background: var(--cal-approved); }
.cal-status--pending  .dot { background: var(--cal-pending); }
.cal-status--action   .dot { background: var(--cal-action); }
.cal-status--declined .dot { background: var(--cal-declined); }

/* ---------- States ---------- */
.cal-state { text-align: center; padding: var(--cal-space-8) var(--cal-space-4);
  color: var(--cal-fg-subtle); max-width: 44ch; margin-inline: auto; }
.cal-state h3 { color: var(--cal-fg); margin-bottom: var(--cal-space-2); }
.cal-skeleton { background: var(--cal-bg-sunken); height: 1em; animation: cal-pulse 1.4s ease-in-out infinite; }
@keyframes cal-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---------- Display helper ---------- */
.cal-display { font-family: var(--serif); font-weight: 500;
  font-size: clamp(40px, 5.6vw, var(--cal-text-display));
  letter-spacing: var(--cal-tracking-display); line-height: var(--cal-leading-display); }