/* SmartPrep Italian — Year 7 Possessive Grammar Builder.
   Uses phonics-style.css as the base so this page visually belongs to the digital hub. */
:root { --g-navy:#1e3a8a; --g-blue:#2563eb; --g-purple:#7c3aed; --g-violet:#f5f3ff;
        --g-line:#e2e8f0; --g-muted:#64748b; --g-green:#047857; --g-red:#b91c1c; }
*,*::before,*::after { box-sizing:border-box; }
body.grammar-page { background:linear-gradient(160deg,#f0f5ff 0%,#f7f5ff 54%,#f8fafc 100%);
  color:#1f2937; min-height:100vh; text-align:left; }
.grammar-page [hidden] { display:none !important; }
header.smartprep-banner { width:100%; height:82px; min-height:82px; margin:0; padding:0 14px;
 display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--g-navy);
 box-shadow:0 4px 6px rgba(0,0,0,.10); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; text-align:center; }
header.smartprep-banner .smartprep-title { font-size:1.6rem; font-weight:700; line-height:1.2; margin:0; color:#fff; }
header.smartprep-banner .smartprep-subtitle { font-size:1rem; font-weight:400; line-height:1.2;
 margin:2px 0 0; color:rgba(255,255,255,.9); }
.grammar-nav { align-items:center; gap:10px; min-height:55px; }
.nav-context { color:#fff; font-weight:700; padding:7px 12px; }
.hub-link { display:inline-flex; align-items:center; padding:9px 15px; color:#fff; background:#334155;
  border-radius:8px; text-decoration:none; font-weight:750; font-size:.92rem; }
.hub-link:hover { background:#1e293b; }
.grammar-main { flex:1; width:min(870px,calc(100% - 30px)); margin:0 auto; padding:26px 0 18px; }
.page-intro { text-align:center; margin-bottom:23px; }
.year-badge { display:inline-block; border:1.5px solid #eab308; color:#854d0e; background:#fef08a;
  padding:7px 14px; border-radius:30px; font-weight:800; letter-spacing:.045em; font-size:.77rem; }
.page-intro h2 { margin:10px 0 8px; color:var(--g-navy); font-size:clamp(1.65rem,4.5vw,2.15rem); }
.page-intro h2 em { color:var(--g-purple); font-style:normal; }
.page-intro p { max-width:690px; margin:0 auto; color:#475569; line-height:1.6; font-size:1rem; }
.activity-panel,.reference-panel { width:100%; background:#fff; border:1px solid var(--g-line);
  border-radius:20px; box-shadow:0 10px 27px rgba(15,23,42,.06); }
.activity-panel { padding:clamp(20px,4vw,34px); margin-bottom:21px; }
.eyebrow,.game-kicker { color:var(--g-purple); letter-spacing:.11em; font-size:.8rem; font-weight:850; }
.activity-panel h3 { font-size:clamp(1.3rem,3.4vw,1.7rem); color:var(--g-navy); margin:8px 0 12px; }
.panel-description { max-width:700px; color:#526176; line-height:1.65; margin:0 0 22px; }
.settings-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.settings-grid .field-label:last-child { grid-column:span 2; }
.field-label { color:#334155; font-size:.92rem; font-weight:750; }
.field-label select { display:block; width:100%; padding:13px 12px; margin-top:8px; border:1.5px solid #cbd5e1;
  border-radius:11px; background:#fff; color:#1e293b; font-size:.97rem; font-weight:500; cursor:pointer;
  font-family:inherit; }
.field-label select:focus-visible { outline:3px solid #a5b4fc; outline-offset:2px; }
button { font-family:inherit; }
.action-primary,.action-secondary { border:0; border-radius:12px; padding:13px 21px; cursor:pointer;
 font-size:1rem; font-weight:800; transition:transform .13s ease, background .14s ease; }
.action-primary { background:var(--g-purple); color:white; box-shadow:0 5px 10px rgba(124,58,237,.13); }
.action-primary:hover { background:#6d28d9; transform:translateY(-1px); }
.action-primary:disabled { opacity:.52; cursor:not-allowed; transform:none; }
.action-secondary { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.action-secondary:hover { background:#dbeafe; }
.start-button { margin:22px 0 0; min-width:205px; }
.microcopy { color:#64748b; font-size:.87rem; line-height:1.5; margin:12px 0 0; }
.game-topline { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; }
.round-badge { padding:6px 11px; border-radius:999px; background:#f3e8ff; color:#6b21a8;
  font-weight:800; font-size:.9rem; }
.score-text { color:#047857; font-weight:800; font-size:.91rem; }
.grammar-progress { margin:14px 0 25px; background:#e9e7f5; height:10px; }
.grammar-progress .progress-fill { background:linear-gradient(90deg,#6366f1,#8b5cf6); }
.english-translation { margin:14px 0 22px; color:#334155; font-size:clamp(1.04rem,2.6vw,1.18rem);
 font-weight:650; line-height:1.5; }
.question-card { background:#f8f7ff; padding:21px 18px; border:1px solid #e9d5ff;
 border-left:5px solid var(--g-purple); border-radius:14px; }
.question-label { font-size:.71rem; font-weight:900; color:#6d28d9; letter-spacing:.08em; margin-bottom:14px; }
.italian-sentence { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:7px;
 font-size:clamp(1.18rem,3.9vw,1.7rem); line-height:1.8; color:var(--g-navy); font-weight:750; }
.italian-before,.italian-after { white-space:pre-wrap; }
.grammar-input { width:clamp(152px,28vw,216px); max-width:100%; padding:8px 10px; border-radius:10px;
 font-size:clamp(1rem,3vw,1.35rem); color:var(--g-navy); border:2px dashed #a78bfa;
 background:#fff; text-align:center; font-weight:750; font-family:inherit; }
.grammar-input:focus { outline:3px solid #ddd6fe; border-color:var(--g-purple); }
.grammar-input.is-right { border-color:#10b981; background:#ecfdf5; }
.grammar-input.is-wrong { border-color:#f87171; background:#fef2f2; }
.drop-zone { min-width:146px; min-height:49px; padding:7px 14px; border:2px dashed #a78bfa;
 border-radius:11px; background:#fff; color:var(--g-purple); font-size:clamp(1rem,3vw,1.25rem);
 font-weight:800; display:inline-flex; align-items:center; justify-content:center; touch-action:manipulation; }
.drop-zone.filled { border-style:solid; background:#ede9fe; }
.drop-zone.drag-hover { border-color:#2563eb; background:#dbeafe; }
.drop-zone.is-right { border-color:#10b981; background:#d1fae5; color:#065f46; }
.drop-zone.is-wrong { border-color:#ef4444; background:#fee2e2; color:#991b1b; }
.owner-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:17px 0 8px; }
.owner-chip { display:inline-block; border-radius:999px; padding:8px 13px; background:#eff6ff;
 color:#1e40af; font-size:.92rem; }
.hint-button { border:1px solid #fbbf24; border-radius:999px; padding:8px 13px; background:#fffbeb;
  color:#854d0e; font-size:.87rem; font-weight:800; cursor:pointer; }
.hint-button:hover { background:#fef3c7; }
.hint-button:disabled { opacity:.65; cursor:default; }
.hint-text { border-left:4px solid #f59e0b; background:#fffbeb; padding:10px 12px; color:#78350f;
 border-radius:9px; margin:10px 0; line-height:1.5; }
.interaction-instructions { color:#64748b; font-size:.87rem; line-height:1.55; margin:14px 0 10px; }
.tile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.word-tile { border:2px solid #c7d2fe; color:#3730a3; background:#eef2ff; border-radius:12px;
  padding:13px 8px; min-height:51px; font-size:clamp(.93rem,2.5vw,1.1rem); font-weight:800;
  cursor:grab; touch-action:manipulation; }
.word-tile:hover { border-color:#8b5cf6; background:#ede9fe; }
.word-tile.selected { background:#ddd6fe; color:#5b21b6; border-color:#7c3aed;
  box-shadow:0 0 0 2px #ede9fe; }
.word-tile:active { cursor:grabbing; }
.word-tile:disabled { cursor:default; }
.action-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:23px; }
.feedback { padding:12px 16px; margin-top:17px; border-radius:12px; font-weight:800; line-height:1.45; }
.feedback.correct { background:#dcfce7; border:1px solid #86efac; color:#166534; }
.feedback.incorrect { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.explanation { border:1px solid #ddd6fe; background:#faf5ff; padding:13px 17px;
 border-radius:12px; margin-top:11px; color:#334155; line-height:1.55; }
.explanation-heading { color:#6b21a8; font-weight:900; font-size:.88rem; }
.explanation p { margin:8px 0 0; }
.full-answer { color:#1e3a8a; font-weight:800; font-size:1.1rem; }
.quit-link { display:block; border:0; background:none; margin:22px auto 0; padding:7px;
 text-decoration:underline; color:#64748b; font-size:.88rem; cursor:pointer; }
.quit-link:hover { color:var(--g-navy); }
.results-panel { text-align:center; }
.results-emoji { font-size:3.25rem; }
.results-panel h3 { margin:7px 0; }
.results-summary { color:#475569; line-height:1.6; }
.results-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:24px 0; }
.results-stats>div { background:#f8fafc; border:1px solid var(--g-line);
 border-radius:13px; padding:15px 6px; }
.results-stats strong { display:block; color:var(--g-purple); font-size:clamp(1.2rem,3.5vw,1.8rem); }
.results-stats span { display:block; color:#64748b; font-size:.81rem; margin-top:5px; }
.results-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.mistake-review { margin:20px 0; text-align:left; padding:16px; background:#fff7ed;
 border:1px solid #fed7aa; border-radius:13px; max-height:360px; overflow-y:auto; }
.mistake-review h4 { margin:0 0 10px; color:#9a3412; }
.mistake-entry { padding:11px 2px; border-top:1px dashed #fed7aa; color:#374151; line-height:1.5; }
.mistake-entry:first-child { border-top:0; }
.mistake-entry strong { color:#1e3a8a; }
.record-text { color:#64748b; font-size:.89rem; }
.reference-panel { overflow:hidden; margin-bottom:27px; }
.reference-panel summary { cursor:pointer; padding:18px 20px; font-size:1rem;
 font-weight:800; color:var(--g-navy); background:#fff; }
.reference-panel[open] summary { background:#f8fafc; border-bottom:1px solid var(--g-line); }
.summary-note { font-size:.8rem; font-weight:500; color:#64748b; }
.reference-content { padding:4px 20px 18px; color:#475569; font-size:.91rem; line-height:1.6; }
.table-scroller { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px;
 border:1px solid var(--g-line); }
.possessive-table { width:100%; border-collapse:collapse; min-width:620px; text-align:center; line-height:1.3; }
.possessive-table th,.possessive-table td { padding:12px 9px; border:1px solid var(--g-line); }
.possessive-table thead { background:#eff6ff; color:var(--g-navy); }
.possessive-table tbody th { text-align:left; color:#1e40af; background:#fafafa; white-space:nowrap; }
.possessive-table td { color:#1e293b; font-weight:700; }
.possessive-table tbody tr:nth-child(even) td { background:#fafaff; }
.reference-tips { margin-top:15px; }
.reference-tips p { margin:8px 0; }
.grammar-footer { text-align:center; color:#64748b; border-top:1px solid var(--g-line);
 margin:40px 0 5px; padding:17px 10px; font-size:.83rem; line-height:1.4; }
.grammar-footer p { margin:5px 0; }
@media(max-width:650px) {
  .grammar-main { width:calc(100% - 18px); padding-top:18px; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-grid .field-label:last-child { grid-column:auto; }
  .activity-panel { padding:20px 15px; }
  .nav-context { font-size:.85rem; }
  .game-topline { gap:7px; }
  .question-card { padding:17px 12px; }
  .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .results-stats { gap:5px; }
  .results-stats>div { padding:12px 4px; }
  .results-actions>* { flex:1 1 100%; }
}
@media(max-width:380px) {
  header.smartprep-banner .smartprep-title { font-size:1.45rem; }
  .italian-sentence { font-size:1.07rem; }
  .grammar-input { width:150px; }
  .owner-chip { font-size:.82rem; }
}
@media(prefers-reduced-motion:reduce) {
  .action-primary,.action-secondary,.grammar-progress .progress-fill { transition:none; }
}