/* tamilamutham/print.css: the A4 practice sheets (/tamilamutham/letters/<slug>/print/).
   One page: top left the big traceable letter, top right about the letter,
   bottom half five practice lines. On screen the sheet sits on a grey desk and
   shrinks to fit a phone; printing uses the real A4 size. */

:root {
  --gold: #D97706; --gold-dark: #B45309; --navy: #0F172A; --muted: #475569;
  --font-tamil: 'Mukta Malar', 'Noto Sans Tamil', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { background: #E2E8F0; color: var(--navy); font-family: var(--font-system); }
.ta { font-family: var(--font-tamil); }

.pr-bar {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  max-width: 190mm; margin: .8rem auto; padding: 0 .8rem;
}
.pr-bar a { color: var(--gold-dark); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.pr-bar a .ta { font-size: 1.2rem; }
.pr-print {
  font: 700 1rem var(--font-tamil); color: #fff; background: var(--gold); border: 0; border-radius: 12px;
  padding: .7rem 1.1rem; min-height: 44px; cursor: pointer; box-shadow: 0 4px 0 var(--gold-dark);
}

.pr-sheet {
  width: 190mm; max-width: calc(100% - 1rem); margin: 0 auto 1.5rem; background: #fff; padding: 8mm;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .15); border-radius: 4px;
  display: flex; flex-direction: column; gap: 4mm;
}

/* ---- Top half ---- */
.pr-top { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
.pr-big { border: .6mm solid var(--gold); border-radius: 4mm; padding: 2mm; display: flex; align-items: center; }
.pr-big svg { width: 100%; height: auto; max-height: 118mm; display: block; }
.pr-info { display: flex; flex-direction: column; gap: 2mm; font-size: 10pt; }
.pr-fill { display: flex; align-items: flex-end; gap: 2mm; font-size: 9pt; color: var(--muted); }
.pr-blank { flex: 1; border-bottom: .3mm solid var(--muted); height: 6mm; }
.pr-letter {
  font: 800 30mm/1 var(--font-tamil); color: var(--navy); text-align: center;
  border-radius: 4mm; padding: 2mm 0 3mm; margin-top: 1mm; background: var(--gt, #FEF3C7);
}
.pr-kind .ta { font-family: var(--font-tamil); font-weight: 700; }
.pr-sound { color: var(--muted); }
.pr-words { list-style: none; display: grid; gap: 1.2mm; }
.pr-words li { display: grid; grid-template-columns: 9mm 1fr; align-items: center; gap: 0 2mm; }
.pr-pic { grid-row: span 2; font-size: 16pt; text-align: center; line-height: 1; }
.pr-pic-letter { font: 800 13pt var(--font-tamil); color: var(--gold-dark); }
.pr-word { font: 800 14pt/1.1 var(--font-tamil); }
.pr-word mark { background: #FDE68A; color: var(--gold-dark); border-radius: 1mm; padding: 0 .3mm; }
.pr-en { color: var(--muted); font-size: 8.5pt; }
.pr-how { font-size: 8.5pt; color: var(--muted); margin-top: auto; }
.pr-how .ta, .pr-rows-how .ta { display: block; color: var(--navy); font-weight: 700; }

/* ---- Bottom half: five practice lines ---- */
.pr-rows { display: flex; flex-direction: column; gap: 2.5mm; }
.pr-rows-how { font-size: 8.5pt; color: var(--muted); }
.pr-row { width: 100%; height: auto; display: block; }

/* Letter drawing (classes from js/letter-svg.js) */
.ls-main { stroke: #60A5FA; }
.ls-zone { stroke: #BFDBFE; }
.ls-letter { fill: #fff; stroke: #64748B; stroke-width: 7; }
.pr-row .ls-letter { stroke: #94A3B8; stroke-width: 9; }
.ls-centre { fill: none; stroke: #94A3B8; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 30; }
.ls-arrow { fill: none; stroke: var(--gold-dark); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ls-start circle { fill: #16A34A; }
.ls-start text { fill: #fff; font-weight: 800; font-family: var(--font-system); text-anchor: middle; }
.ls-mark { fill: #CBD5E1; font: 700 54px var(--font-system); text-anchor: end; }

.pr-foot { text-align: center; font-size: 8.5pt; color: var(--muted); border-top: .3mm solid #E2E8F0; padding-top: 2mm; }

/* Letter-group tint behind the solid letter (same colours as amutham.css) */
.am-g-kuril { --gt: #D1FAE5; } .am-g-nedil { --gt: #E0F2FE; } .am-g-vallinam { --gt: #FFE4E6; }
.am-g-mellinam { --gt: #EDE9FE; } .am-g-idaiyinam { --gt: #FEF3C7; } .am-g-aaytham { --gt: #FCE7F3; }
.am-g-grantham { --gt: #CCFBF1; }

@media (max-width: 560px) {
  .pr-sheet { padding: 4mm; }
  .pr-top { grid-template-columns: 1fr; }
  .pr-letter { font-size: 22mm; }
}

@page { size: A4 portrait; margin: 10mm; }
@media print {
  html, body { background: #fff; }
  .pr-bar { display: none; }
  .pr-sheet { width: 190mm; max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; height: 277mm; }
  .pr-top { height: 128mm; }
  .pr-rows { flex: 1; justify-content: space-between; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}