@layer site {
/* Project Alignment and Final Deliverables (stages 02 and 05). */

/* Decision buttons (02 hero mock, 05 supervisor row). */
.dec-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--white); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.dec-btn-alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dec-btn[aria-pressed="true"] { background: var(--teal); color: var(--white); box-shadow: none; }

/* 02: the mock sits beside the hero text, not below it. */
.pa-mock { margin: 0 !important; max-width: none !important; } /* .mock-window (ui.css) is unlayered */

/* 05: submission checklist. */
.fd-item { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--ink-18); transition: box-shadow var(--t-fast, .2s) ease; }
.fd-item:hover { box-shadow: inset 0 0 0 1.5px var(--ink-35); }
.fd-item[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--teal); }
.fd-item:disabled { cursor: default; }
.fd-tick { width: 24px; height: 24px; flex: 0 0 auto; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: transparent; box-shadow: inset 0 0 0 2px var(--ink-35); transition: background-color .2s ease, color .2s ease; }
.fd-item[aria-pressed="true"] .fd-tick { background: var(--teal); color: var(--white); box-shadow: none; }
.fd-tag { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-35); }
.fd-item[aria-pressed="true"] .fd-tag { background: var(--teal-12); color: var(--ink); box-shadow: none; }
.fd-submit:disabled { opacity: .4; cursor: not-allowed; }
.fd-role-row { display: flex; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--ink-18); font-size: 20px; line-height: 1.45; font-weight: 600; }
.fd-role-row .check-circle { transform: translateY(2px); }

@media (max-width: 759.98px) {
  /* "ΕΓΚΕΚΡΙΜΕΝΗ." is ~5.6× the font size wide; shrink it to its column on phones. */
  .fd-h1-wrap { container-type: inline-size; }
  .fd-h1 { font-size: min(56px, calc((100cqw - 36px) / 5.6)) !important; }
}

@media (max-width: 639.98px) {
  /* Mock columns wrap under each other: swap the side divider for a top one. */
  .stage-mock .bl-1-sand { border-left: 0 !important; border-top: 1px solid var(--sand); }
}

}