/* Mökin vedet — styles
   Tokens pulled from the Figma design system (wE3DtQQEPyWUZUgb9RNvnZ). */

:root {
  --color-bg: #ffffff;
  --color-surface: #f9f9f9;
  --color-surface-alert: #fff6d0;
  --color-border: #cac9c5;
  --color-border-line: #e0e0dd;
  --color-border-alert: #ffd415;
  --color-text-primary: #194a63;
  --color-text-link: #256e92;
  --color-text-heading: #101828;
  --color-overlay: rgba(0, 0, 0, 0.85);

  --radius-sm: 8px;
  --radius-full: 999px;

  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;

  --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* App bar */

.app-bar {
  position: relative;
  height: 64px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--color-border-line);
  background: var(--color-bg);
}

.app-bar__title {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 56px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--color-text-primary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn {
  position: absolute;
  top: 10px;
  left: 4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0;
}

.icon-btn:hover {
  background: var(--color-surface);
}

.icon-btn[hidden] {
  display: none;
}

/* Views */

main {
  flex: 1 1 auto;
  padding: var(--space-16);
}

main[hidden] {
  display: none;
}

/* Home page — process list */

#home-view {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: var(--space-24);
}

#home-view[hidden] {
  display: none;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.card-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px; /* Figma Card/Project height */
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
}

.card-project .icon {
  flex: 0 0 auto;
  color: var(--color-text-primary);
}

.contact-box {
  display: flex;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border-line);
}

.contact-box .icon {
  flex: 0 0 auto;
  color: var(--color-text-link);
}

.contact-box__title {
  margin: 0 0 var(--space-4);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--color-text-primary);
}

.contact-box__text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
}

/* Project page */

#project-view {
  /* Extra breathing room so the last task card doesn't sit on the screen edge. */
  padding-bottom: var(--space-40);
}

.page-description {
  /* 24px below = the space above "Tarvittavat työkalut", matching the phase gap. Was var(--space-8). */
  margin: 0 0 var(--space-24);
  font-size: 16px;
  line-height: 24px;
}

.page-tools {
  margin: 0 0 var(--space-16);
}

.page-tools__label {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600; /* hierarchy trial 2026-07 — to revert, remove this line (was 400/normal) */
  color: var(--color-text-link);
}

.page-tools__row {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
}

.step-group {
  margin-bottom: var(--space-16);
}

.step-group__header {
  padding-top: var(--space-8);
  margin-bottom: var(--space-16);
}

.step-group__label {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600; /* hierarchy trial 2026-07 — to revert, remove this line (was 400/normal) */
  color: var(--color-text-link);
}

.step-group__name {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-text-heading);
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Task card — linear step flow (done / current / locked) */

.card-task {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}

/* Locked (future) steps: title only, muted. Muted via explicit colors (not
   opacity) so the text keeps ~4.5:1 contrast (AA) while still reading as inactive. */
.card-task.is-locked .card-task__title,
.card-task.is-locked .card-task__tag,
.card-task.is-locked .task-badge {
  color: #31769b; /* a lighter tint of the primary teal-blue; 4.75:1 on the card */
}

.card-task.is-locked .task-badge {
  background: var(--color-surface); /* match the card so the badge recedes (more "locked") */
  border-color: #d8dbe0;
}

.card-task.is-current {
  background: var(--color-bg);
}

/* Head = number badge + title row. A `button` on done steps (tap to rewind). */
.card-task__head {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  width: 100%;
  padding: var(--space-12) var(--space-16);
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
}

button.card-task__head {
  cursor: pointer;
}

.task-badge {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: 600;
}

.task-badge .check-icon {
  display: none;
}

.card-task.is-current .task-badge {
  border-color: var(--color-text-link);
  color: var(--color-text-link);
}

.card-task.is-done .task-badge {
  background: var(--color-text-link);
  border-color: var(--color-text-link);
  color: #ffffff;
}

.card-task.is-done .task-badge__num {
  display: none;
}

.card-task.is-done .task-badge .check-icon {
  display: block;
}

.card-task__titlerow {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 32px;
}

.card-task__title {
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-primary);
}

.card-task__tag {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-link);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Body: indented under the title, shown for done + current steps. */
.card-task__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: 0 var(--space-16) var(--space-16) calc(var(--space-16) + 32px + var(--space-12));
}

.card-task__section-label {
  margin: 0 0 var(--space-4);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-link);
}

.card-task__section-text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
  white-space: pre-line;
}

/* Attachments */

.attachments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.attachment-thumb {
  width: 78px;
  height: 78px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  object-fit: cover;
  cursor: pointer;
  background: var(--color-surface);
  padding: 0;
}

.attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 1px);
  display: block;
}

/* Alert / Huomio */

.alert-box {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-16);
  background: var(--color-surface-alert);
  border: 1px solid var(--color-border-alert);
  border-radius: var(--radius-sm);
}

.alert-box .icon {
  flex: 0 0 auto;
  color: var(--color-text-primary);
}

.alert-box__title {
  margin: 0 0 var(--space-4);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.alert-box__text {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay);
  z-index: 100;
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ---------- Progress + check-off ---------- */

.progress {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  /* Full-bleed to the app edges so scrolling cards are fully masked behind it. */
  margin: 0 calc(-1 * var(--space-16)) var(--space-24);
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-line);
}

.progress__count {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--color-text-link);
  color: #ffffff;
}

.progress__track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  width: 0;
  background: var(--color-text-link);
  transition: width 0.2s ease;
}

/* Home card — done/total count. */
.card-project {
  gap: var(--space-8);
}

.card-project__title {
  flex: 1 1 auto;
  min-width: 0;
}

.card-project__count {
  /* Minimalismi: numbers only, same colour as the card text — no pill, no done state. */
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Step flow controls (on the current step) — primary "mark complete" + back. */
.step-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

.btn-complete {
  flex: 1 1 auto;
  padding: 12px 16px;
  background: var(--color-text-link);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn-complete:active {
  transform: translateY(1px);
}

/* Completion modal — shown when every step is done. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: var(--color-overlay);
}

.modal[hidden] {
  display: none;
}

.modal__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  max-width: 340px;
  padding: var(--space-32) var(--space-24);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.modal__text {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
  color: var(--color-text-heading);
}

.modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--color-text-link);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.modal__btn:active {
  transform: translateY(1px);
}

.modal__btn svg {
  width: 30px;
  height: 30px;
  display: block;
}