/* Vierityspalkki App Design System — komponentit
 *
 * Puhdasta CSS:ää tokeneiden päällä. Ei riippuvuuksia, ei build-vaihetta.
 * Vaatii tokens/colors.css, tokens/typography.css ja tokens/spacing.css
 * (tai styles.css, joka importtaa kaikki kolme).
 *
 * Nimeäminen: .vp-komponentti, .vp-komponentti__osa, .vp-komponentti--variantti.
 * Kaikki arvot tulevat tokeneista — älä kovakoodaa värejä tai mittoja.
 */

/* ---------------------------------------------------------------- Button */

.vp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.vp-btn--sm { padding: 7px 13px; font-size: 12.5px; }
.vp-btn--lg { padding: 12px 22px; font-size: 14px; }

.vp-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-button);
}
.vp-btn--primary:hover { background: var(--accent-hover); }

.vp-btn--dark { background: var(--dark); color: #fff; }
.vp-btn--dark:hover { background: var(--dark-hover); }

.vp-btn--secondary {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line-1);
}
.vp-btn--secondary:hover { background: var(--bg-app); border-color: var(--line-hover); }

.vp-btn--accent-ghost {
  background: var(--surface-2);
  color: var(--link);
  border: 1px solid var(--line-1);
}
.vp-btn--accent-ghost:hover { background: var(--accent-tint); border-color: var(--accent); }

.vp-btn--danger-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--line-1);
}
.vp-btn--danger-ghost:hover {
  background: var(--danger-bg-subtle);
  color: var(--danger);
  border-color: var(--danger-line);
}

.vp-btn--link {
  background: none;
  color: var(--link);
  padding: 2px 4px;
  box-shadow: none;
}
.vp-btn--link:hover { color: var(--link-hover); text-decoration: underline; }

.vp-btn:disabled,
.vp-btn[aria-disabled="true"] {
  background: var(--surface-disabled);
  color: var(--text-faint);
  border: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* ------------------------------------------------------------ StatusChip */

.vp-chip {
  display: inline-block;
  font: var(--text-chip);
  color: var(--status-neutral-fg);
  background: var(--status-neutral-bg);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.vp-chip--sm { font-size: 10px; padding: 2px 6px; }

.vp-chip--waiting { color: var(--status-waiting-fg); background: var(--status-waiting-bg); }
.vp-chip--editing { color: var(--status-editing-fg); background: var(--status-editing-bg); }
.vp-chip--done    { color: var(--status-done-fg);    background: var(--status-done-bg); }
.vp-chip--brand   { color: var(--status-brand-fg);   background: var(--status-brand-bg); }
.vp-chip--danger  { color: var(--danger);            background: var(--danger-bg); }

/* ------------------------------------------------------------------ Card */

.vp-card {
  box-sizing: border-box;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-xl);
  padding: 18px 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.vp-card--sm { padding: 14px; }
.vp-card--lg {
  padding: 28px;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

.vp-card--hoverable { cursor: pointer; }
.vp-card--hoverable:hover {
  border-color: var(--line-hover);
  box-shadow: var(--shadow-card-hover);
}

/* ---------------------------------------------------------- SectionTitle */

.vp-section-title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
}

.vp-section-title--split { justify-content: space-between; }

.vp-section-title__heading {
  margin: 0;
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--text-3);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.vp-section-title__count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.vp-section-title__meta {
  font: var(--text-meta);
  color: var(--text-faint);
}

/* ------------------------------------------------------------ EmptyState */

.vp-empty {
  border: 1px dashed var(--line-3);
  border-radius: var(--radius-xl);
  padding: 64px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp-empty--compact { border-radius: var(--radius-lg); padding: 18px; }

.vp-empty__title {
  font-family: var(--font-content);
  font-size: 17px;
  color: var(--text-3);
}
.vp-empty--compact .vp-empty__title { font-size: 13px; color: var(--text-faint); }

.vp-empty__hint { font: var(--text-ui); color: var(--text-faint); }

/* ----------------------------------------------------------------- Field */

.vp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vp-field__label {
  font: var(--text-label);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vp-field__label--kicker {
  font: var(--text-kicker);
  color: var(--text-faint);
  letter-spacing: var(--kicker-tracking);
}

.vp-field__hint {
  font: var(--text-meta);
  color: var(--text-faint);
  line-height: 1.5;
}

/* ------------------------------------------------------- Input, Textarea */

.vp-input,
.vp-textarea {
  box-sizing: border-box;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text-1);
  outline: none;
  transition: border-color .15s ease;
}

.vp-input:focus,
.vp-textarea:focus { border-color: var(--accent); }

.vp-input--error,
.vp-input--error:focus { border-color: var(--danger); }

.vp-textarea {
  line-height: 1.5;
  resize: vertical;
}

.vp-textarea--serif {
  font-family: var(--font-content);
  font-size: 15.5px;
}

/* Virheviesti kentän alla */
.vp-error {
  font-size: 12.5px;
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}

/* ------------------------------------------------------------- Segmented */

.vp-segmented { display: flex; gap: 8px; }

.vp-segmented__option {
  flex: 1;
  border: 1px solid var(--line-1);
  background: var(--surface-2);
  color: var(--text-3);
  border-radius: var(--radius-md);
  padding: 9px 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.vp-segmented__option:hover { border-color: var(--line-hover); }

.vp-segmented__option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-weight: 600;
}

/* ------------------------------------------------- Merkki (logo) ja header */

.vp-mark {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

.vp-mark--lg { width: 34px; height: 34px; border-radius: var(--radius-md); }

.vp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-1);
}

.vp-header__brand { display: flex; align-items: center; gap: 12px; }
.vp-header__titles { display: flex; align-items: baseline; gap: 10px; }

.vp-header__name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-1);
}

.vp-header__app { font: var(--text-ui); color: var(--text-muted); }

.vp-header__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font: var(--text-ui);
  color: var(--text-3);
}

/* --------------------------------------------------------------- Stepper */

.vp-stepper {
  display: flex;
  align-items: center;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-1);
}

.vp-stepper__step { display: flex; align-items: center; gap: 8px; }

.vp-stepper__num {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-1);
  color: var(--text-faint);
  border: 1px solid var(--line-3);
}

.vp-stepper__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint);
}

.vp-stepper__step--done .vp-stepper__num { background: var(--surface-3); }

.vp-stepper__step--current .vp-stepper__num {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.vp-stepper__step--current .vp-stepper__label {
  font-weight: 600;
  color: var(--text-1);
}

.vp-stepper__arrow {
  margin: 0 18px;
  color: var(--line-hover);
  font-size: 13px;
}

/* ------------------------------------------------------------- Sivupohja */

.vp-page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px var(--page-pad-x) 64px;
  box-sizing: border-box;
}

.vp-page--narrow  { max-width: var(--page-max-narrow); }
.vp-page--reading { max-width: var(--page-max-reading); }

/* Kuvapaikka: raidallinen placeholder + monospace-selite */
.vp-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  background: repeating-linear-gradient(45deg, #faf9f7, #faf9f7 12px, #f3f1ed 12px, #f3f1ed 24px);
}