@import url('/assets/phraseflow-home.css');
/* Shared PhraseFlow identity and practice-screen styling. */
:root {
  --background: 140 28% 98%;
  --foreground: 210 25% 19%;
  --card: 0 0% 100%;
  --card-foreground: 210 25% 19%;
  --primary: 127 52% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 144 24% 94%;
  --secondary-foreground: 127 52% 25%;
  --muted: 145 14% 95%;
  --muted-foreground: 207 12% 42%;
  --accent: 198 75% 41%;
  --accent-foreground: 0 0% 100%;
  --border: 144 18% 87%;
  --ring: 127 52% 32%;
  --level-beginner: 127 52% 32%;
  --level-intermediate: 198 75% 41%;
  --level-advanced: 351 72% 57%;
  --card-shadow: 0 8px 26px -14px rgb(36 48 59 / 24%);
  --gradient-primary: linear-gradient(135deg,#287D32,#47AE46);
  --gradient-hero: linear-gradient(160deg,#f8fdf8,#eef8f1);
  --gradient-card: linear-gradient(135deg,#fff,#fbfefb);
}
.dark {
  --background: 213 23% 11%;
  --foreground: 145 20% 95%;
  --card: 211 21% 16%;
  --card-foreground: 145 20% 95%;
  --primary: 127 54% 50%;
  --primary-foreground: 210 25% 12%;
  --secondary: 211 18% 22%;
  --secondary-foreground: 145 20% 95%;
  --muted: 211 18% 22%;
  --muted-foreground: 150 10% 70%;
  --border: 210 15% 28%;
  --ring: 127 54% 50%;
  --gradient-hero: linear-gradient(160deg,#161f25,#1a2928);
  --gradient-card: linear-gradient(135deg,#1d2a2b,#20302e);
}
header a[href="/"] > div:first-child,
header > div > div:first-child > div:first-child {
  background: url('/phraseflow-mark.svg') center / cover no-repeat !important;
  box-shadow: 0 3px 8px rgb(40 125 50 / 20%);
}
header a[href="/"] > div:first-child svg,
header > div > div:first-child > div:first-child svg { visibility: hidden; }
header a[href="/"] > span,
header > div > div:first-child > span { letter-spacing: -.035em; }
/* Home: topic colors live in the icons; readable cards carry the content. */
main .grid[ class*="max-w-5xl"] > [role="button"] {
  background: #fff;
  border: 1px solid #dcebdd;
  box-shadow: 0 5px 18px -12px rgb(36 48 59 / 25%);
}
main .grid[ class*="max-w-5xl"] > [role="button"]:hover,
main .grid[ class*="max-w-5xl"] > [role="button"]:focus-visible {
  box-shadow: 0 12px 26px -13px rgb(36 48 59 / 28%);
}
main .grid[ class*="max-w-5xl"] > [role="button"] > .absolute.inset-0 {
  background: linear-gradient(150deg,#fff 0%,#f8fcf8 100%) !important;
  opacity: 1 !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"] h3 { color: #24303b !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] p { color: #53666a !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] span {
  color: #32523e !important;
  background: #e9f5e9 !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .h-1.bg-white\/20 { background: #e1eee3 !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] .h-1.bg-white\/20 > div { background: #43ad4a !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] .w-16.h-16 { background: linear-gradient(145deg,#39a748,#287d32) !important; box-shadow: 0 5px 12px -5px rgb(40 125 50 / 38%); }
main .grid[ class*="max-w-5xl"] > [role="button"]:nth-child(4n+2) .w-16.h-16 { background: linear-gradient(145deg,#2998c5,#197db5) !important; box-shadow: 0 5px 12px -5px rgb(25 125 181 / 38%); }
main .grid[ class*="max-w-5xl"] > [role="button"]:nth-child(4n+3) .w-16.h-16 { background: linear-gradient(145deg,#ee8a68,#d75d54) !important; box-shadow: 0 5px 12px -5px rgb(215 93 84 / 38%); }
main .grid[ class*="max-w-5xl"] > [role="button"]:nth-child(4n+4) .w-16.h-16 { background: linear-gradient(145deg,#eebd40,#c98c21) !important; box-shadow: 0 5px 12px -5px rgb(201 140 33 / 38%); }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] { background: #1d2a2b; border-color: #375049; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] > .absolute.inset-0 { background: linear-gradient(150deg,#20302e,#1b292b) !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] h3 { color: #f1f8f2 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] p { color: #b8d2c0 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] span { color: #d6f1da !important; background: #294b37 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] .h-1.bg-white\/20 { background: #3d5a47 !important; }
.dark main > .text-center > .inline-flex { background: #244533 !important; color: #c6efcc !important; border-color: #386b48 !important; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #F7C84B; outline-offset: 3px; }
button:not(:disabled) { transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
button:not(:disabled):active { transform: translateY(1px); }
button[aria-label="Ouvir pronúncia"] {
  color: #197DB5 !important;
  background-color: #e6f4fb !important;
  border-color: #bddff0 !important;
}
button[aria-label="Ouvir pronúncia"]:hover { background-color: #d4ecf8 !important; }

/* Practice: make the listen → speak → result sequence explicit. */
.card-hover-lift .card-flip-inner { height: clamp(342px, 78vw, 390px); aspect-ratio: auto; }
.card-face:not(.card-face-back) .absolute.top-3.left-3 > button:first-child { display: none; }
.card-face:not(.card-face-back) .text-center.space-y-3.mt-2 { display: flex; flex-direction: column; align-items: center; gap: 0; transform: translateY(-6px); }
.card-face:not(.card-face-back) .text-center.space-y-3.mt-2 > p { margin-top: 10px; }
.card-face:not(.card-face-back) .text-center.space-y-3.mt-2 > p.font-mono { margin-top: 2px; }
.practice-phonetic-label { display: block; margin-top: 8px; color: #62766b; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.practice-listen-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 162px; min-height: 44px; margin-top: 18px; padding: 9px 18px; border: 1px solid #b9dff1; border-radius: 13px; background: #e7f5fc; color: #166b9b; font-size: 14px; font-weight: 750; box-shadow: 0 3px 9px -6px rgb(22 107 155 / 38%); }
.practice-listen-button:hover:not(:disabled) { background: #d4edf9; }
.practice-listen-button:disabled { opacity: .7; cursor: wait; }
.practice-listen-button svg { width: 19px; height: 19px; flex: none; }
.card-face:not(.card-face-back) .practice-translation-link { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 13px; border-radius: 999px; background: #f0f6f1; color: #2c7542; font-size: 12px; font-weight: 700; cursor: pointer; }
.card-face:not(.card-face-back) .practice-translation-link::after { content: '↗'; margin-left: 6px; font-size: 13px; }
.practice-record-hint { margin: 8px 0 0 74px; color: #427b53; font-size: 12px; font-weight: 650; line-height: 1.35; }
button.practice-recording-active { width: auto !important; min-width: 116px; padding: 0 16px; gap: 8px; border-radius: 16px !important; }
button.practice-recording-active::after { content: "Pronto"; font-size: 13px; font-weight: 750; line-height: 1; }
.dark .practice-phonetic-label { color: #afc9b7; }
.dark .practice-listen-button { background: #1f4252; border-color: #386c7e; color: #c0eaff; }
.dark .card-face:not(.card-face-back) .practice-translation-link { background: #254b36; color: #c2edcc; }
.dark .practice-record-hint { color: #a6ddb2; }
@media (max-width: 360px) {
  .card-hover-lift .card-flip-inner { height: 350px; }
  .card-face:not(.card-face-back) .text-center.space-y-3.mt-2 > p { margin-top: 7px; }
  .practice-listen-button { margin-top: 12px; }
}
.card-face > div[style*="border-left"] { border-left-color: #65CD50 !important; }
.card-face [style*="background-color: rgb(59, 130, 246)"] { background-color: #65CD50 !important; }
.bg-primary { box-shadow: inset 0 -2px rgb(0 0 0 / 9%); }
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled) { transition: none; }
}

/* Home composition: one starting point, then a browsable phrasebook. */
main:has(.grid[ class*="max-w-5xl"]) { padding-top: clamp(32px,6vw,72px); }
main:has(.grid[ class*="max-w-5xl"]) > .text-center {
  max-width: 1024px;
  margin: 0 auto 38px;
  text-align: left;
}
main:has(.grid[ class*="max-w-5xl"]) > .text-center > .inline-flex { display: none; }
main:has(.grid[ class*="max-w-5xl"]) h1 {
  max-width: 15ch;
  margin-bottom: 12px;
  font-size: clamp(2.5rem,6vw,4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
main:has(.grid[ class*="max-w-5xl"]) > .text-center > p {
  color: #53666a;
  font-size: clamp(1rem,2vw,1.15rem);
  line-height: 1.45;
}
main .grid[ class*="max-w-5xl"] { gap: 14px !important; }
main .grid[ class*="max-w-5xl"] > [role="button"] {
  min-height: 154px;
  padding: 21px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  animation: none !important;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:hover {
  transform: translateY(-2px) !important;
  border-color: #9dcea4;
  box-shadow: 0 10px 22px -16px rgb(36 48 59 / 24%) !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"] > .absolute.inset-x-0 { display: none; }
main .grid[ class*="max-w-5xl"] > [role="button"] > .relative.z-10 {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  column-gap: 16px;
  align-content: start;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-start.justify-between.mb-4 {
  grid-column: 1;
  grid-row: 1 / 4;
  margin: 0;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .w-16.h-16 {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  padding: 10px;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .w-16.h-16 svg { width: 28px; height: 28px; }
main .grid[ class*="max-w-5xl"] > [role="button"] h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 1px 0 4px;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -.025em;
}
main .grid[ class*="max-w-5xl"] > [role="button"] p {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 12px;
  font-size: .875rem;
  line-height: 1.35;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between {
  grid-column: 2;
  grid-row: 3;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between span {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #5a6f62 !important;
  font-size: .76rem;
  font-weight: 600;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between span + span::before {
  content: '•';
  margin-right: 8px;
  color: #8aae93;
}
main .grid[ class*="max-w-5xl"] > [role="button"] .mt-3.w-full.h-1 {
  grid-column: 1 / -1;
  margin-top: 18px;
  height: 3px;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child {
  min-height: 318px;
  border: 0;
  background: #174c36;
  color: #fff;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child > .absolute.inset-0 {
  background: linear-gradient(128deg,#174c36 0%,#23794a 100%) !important;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child > .relative.z-10 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .flex.items-start.justify-between.mb-4 { margin-bottom: auto; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .w-16.h-16 {
  width: 70px;
  height: 70px;
  background: #65cd50 !important;
  color: #153b2b;
  box-shadow: none;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .w-16.h-16 svg { width: 38px; height: 38px; color: #153b2b !important; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child h3 {
  max-width: 18ch;
  margin-bottom: 6px;
  color: #fff !important;
  font-size: clamp(1.65rem,3vw,2.25rem);
  line-height: 1.08;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child p {
  margin-bottom: 16px;
  color: #d9f4df !important;
  font-size: .98rem;
}
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .flex.items-center.justify-between span { color: #e4f8e8 !important; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .mt-3.w-full.h-1 { background: rgb(255 255 255 / 24%) !important; }
main .grid[ class*="max-w-5xl"] > [role="button"]:first-child .mt-3.w-full.h-1 > div { background: #a4ec7e !important; }
.dark main:has(.grid[ class*="max-w-5xl"]) > .text-center > p { color: #b8d2c0; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"] .flex.items-center.justify-between span { color: #b8d2c0 !important; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { background: #174c36; }
.dark main .grid[ class*="max-w-5xl"] > [role="button"]:first-child > .absolute.inset-0 { background: linear-gradient(128deg,#174c36,#23794a) !important; }
@media (min-width: 1024px) {
  main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { grid-column: span 2; }
}
@media (max-width: 639px) {
  main:has(.grid[ class*="max-w-5xl"]) { padding-top: 36px; }
  main:has(.grid[ class*="max-w-5xl"]) > .text-center { margin-bottom: 28px; }
  main .grid[ class*="max-w-5xl"] > [role="button"]:first-child { min-height: 294px; }
}