/* Variables & base */
:root{
  --brand-blue: #0b76f0;
  --brand-blue-dark: #00337f;
  --solution-bg: #0b6f5e;
  --solution-border: #085e50;
  --text: #31353d;
  --muted: #9a9b9c;
  --stroke: #e6e8eb;
  --surface: #ffffff;
  --radius-pill: 99px;
  --shadow-m: 0 8px 20px rgba(16,24,40,.08);
  --pain-bg: #0b76f0;
  --pain-border: #043368;
  --pain-text: white;

  --ok-bg: #ecfdf5;
  --ok-border: #10b981;
  --ok-text: #065f46;

  --err-bg: #fef2f2;
  --err-border: #ef4444;
  --err-text: #7f1d1d;
}
*{box-sizing:border-box}
body{ margin:0; background:#fff; color:var(--text); font-family:'Roboto', Arial, Helvetica, sans-serif; }
h1, h2, h3, .title{ font-family:'Sora', 'Roboto', Arial, sans-serif; }
.shell{ width:min(1200px, 96%); margin: 20px auto; }
.board{
  height: calc(100vh - 40px);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
.card-btn{ all:unset; display:block; width:100%; height:100%; cursor:pointer; border-radius:20px; position:relative; }
.flipcard, .flipcard *{ pointer-events:none; }
.flipcard{ position:relative; width:100%; height:100%; border-radius:inherit; }
.flipcard-inner{ position:absolute; inset:0; border-radius:inherit; transform-style:preserve-3d; transition: transform .6s ease; }
.card-btn[aria-pressed="true"] .flipcard-inner{ transform: rotateY(180deg); }
.face{ position:absolute; inset:0; border-radius:inherit; display:grid; place-items:center; padding:22px; text-align:center; backface-visibility:hidden; }
.front{ background: var(--pain-bg); border: 1px solid var(--pain-border); color: var(--pain-text); box-shadow: var(--shadow-m); }
.back{ transform: rotateY(180deg); background: var(--solution-bg); color: #fff; border: 1px solid var(--solution-border); box-shadow: var(--shadow-m); }
.kicker{ font-size:13px; text-transform:uppercase; opacity:0.8; }
.front .kicker{ color: var(--pain-text); }
.back .kicker{ color: #e6fffa; }
.title{ font-size:18px; font-weight:700; }

button, .btn{
  background: var(--brand-blue); color: white;
  border: none; padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 500; cursor: pointer;
  font-family: 'Roboto', Arial, sans-serif;
}
button:disabled, .btn:disabled{ opacity:0.6; cursor:not-allowed; }
.fab{ position: fixed; right: 22px; bottom: 22px; z-index: 50; box-shadow: var(--shadow-m); }

/* Modals */
.modal-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; }
.modal-backdrop[data-open="true"]{ display: block; }
.modal{ position: fixed; inset: 0; display: none; place-items: center; z-index: 60; }
.modal[data-open="true"]{ display: grid; }
.modal-card{ background: #fff; padding: 28px; border-radius: 20px; width: min(620px, 92%); border: 1px solid var(--stroke); box-shadow: var(--shadow-m); }
.modal-card h2{ margin:0 0 16px 0; font-size: clamp(18px, 2vw, 22px); }
.summary-list{ padding-left: 22px; margin: 0 0 16px 0; }
.summary-list li{ margin: 10px 0; line-height: 1.5; color: var(--text); }

/* Toast */
.toast{ display:none; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid transparent; font-size: 14px; }
.toast[data-show="true"]{ display:block; }
.toast.ok{ background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.toast.err{ background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.toast .close{ float: right; margin-left: 10px; cursor: pointer; opacity: .6; }

/* Email row */
.email-share{ margin-top: 8px; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.email-share label{ width: 100%; font-size:14px; color:var(--muted); margin-bottom: 4px; }
.email-share input{ width: 100%; max-width: 380px; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:#fff; color:var(--text); font-family:'Roboto', Arial, sans-serif; }
.email-share .actions{ margin-left: auto; display:flex; gap:10px; flex-wrap: wrap; }
.status{ margin-top:10px; font-size:14px; color:var(--muted); }

@media (max-width: 520px){
  .board{ grid-template-columns: 1fr; grid-template-rows: repeat(9, minmax(100px, 1fr)); }
}


/* Icon defaults */
.tile-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 10px 0;
  display: inline-block;
}

/* Inherit color per side */
.front .tile-icon {
  color: var(--pain-text);
}

.back .tile-icon {
  color: #ffffff;
  opacity: 0.95;
}

/* Hide icons on smaller screens */
@media (max-width: 640px) {
  .tile-icon {
    display: none;
  }
}

/* Responsive adjustments for narrow screens */
@media (max-width: 700px) {
  .back .title {
    font-size: clamp(14px, 4vw, 16px);
    /* slightly smaller text */
    line-height: 1.4;
  }

  .back .kicker {
    font-size: 11px;
  }

  .face.back {
    padding: 16px;
    /* reduce padding for tight spaces */
  }
}