/* YUKI HEALTH - Health Guide page (emergency numbers, first aid, health numbers, timers, health card). */

.ta-sub { display: block; margin-top: 2px; font-size: 0.6em; font-weight: var(--weight-semibold); color: var(--color-text-muted); letter-spacing: 0; }
.fine { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.print-only { display: none; }

/* Top bar with the language switch */
.guide-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.guide-top .eyebrow { margin: 0; }

/* Emergency numbers */
.enums { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: var(--space-4); }
.enum a {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}
.enum a:hover { border-color: var(--color-brand); color: var(--color-text); }
.enum strong { flex: none; min-width: 2.8em; font-size: var(--text-xl); color: var(--color-brand-ink); font-variant-numeric: tabular-nums; }
.enum span { font-size: var(--text-sm); line-height: 1.35; }
.enum span span { color: var(--color-text-muted); font-size: var(--text-xs); }
.enum--urgent a { border-color: var(--color-status-alert); background: #FDF1F0; }
.enum--urgent strong { color: var(--color-status-alert); font-size: 1.75rem; }
.enum--clinic strong { font-size: var(--text-base); min-width: 0; }

/* First aid */
.fa-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-5); }
.fa-head h2 { margin-bottom: var(--space-2); }
.lang-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-surface); }
.lang-toggle button {
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    font: inherit;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--color-brand-strong); color: #fff; }
.fa-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .fa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fa-grid { grid-template-columns: repeat(3, 1fr); } }
/* One language at a time across the whole page */
.guide[data-guide-lang="en"] .ta, .guide[data-guide-lang="ta"] .en { display: none !important; }
.guide[data-guide-lang="ta"] { line-height: 1.7; }
.guide[data-guide-lang="ta"] .eyebrow, .guide[data-guide-lang="ta"] .hcard__top { letter-spacing: 0; text-transform: none; }
.fa {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-top: 4px solid var(--color-brand);
    border-radius: var(--radius-lg);
    break-inside: avoid;
}
.fa--urgent { border-top-color: var(--color-status-alert); }
.fa h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); }
.fa ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2); font-size: var(--text-sm); line-height: 1.55; }
.fa [lang="ta"] { line-height: 1.7; }
.fa__note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.fa__link { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semibold); }

/* Normal health numbers */
.hnums { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .hnums { grid-template-columns: repeat(2, 1fr); } }
.hnum { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); break-inside: avoid; }
.hnum h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); }
.hnum h3 span { display: block; margin-top: 2px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.hnum dl { display: grid; gap: var(--space-2); margin: 0; }
.hnum dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.hnum dt { font-weight: var(--weight-semibold); }
.hnum dd { margin: 0; }
.hnum .ok { background: #EEF6EE; }   .hnum .ok dt { color: var(--color-status-good); }
.hnum .watch { background: #FFF6E5; } .hnum .watch dt { color: var(--color-status-caution); }
.hnum .see { background: #FFF0E6; }  .hnum .see dt { color: var(--color-brand-ink); }
.hnum .sos { background: #FDECEB; }  .hnum .sos dt { color: var(--color-status-alert); }
.hnum__how { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 479px) { .hnum dl div { grid-template-columns: 1fr; gap: 2px; } }

/* Timers */
.timers { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .timers { grid-template-columns: repeat(2, 1fr); } }
.timer h3 { font-size: var(--text-lg); }
.timer__clock { margin: var(--space-4) 0; font-size: 3rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timer__clock--sm { font-size: var(--text-lg); margin: var(--space-3) 0; }
.timer__alert { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #FDECEB; color: var(--color-status-alert); font-weight: var(--weight-bold); }
.cpr { display: grid; place-items: center; height: 120px; margin-top: var(--space-4); }
.cpr__dot { width: 64px; height: 64px; border-radius: 50%; background: var(--color-brand-soft); border: 3px solid var(--color-brand); }
.cpr__dot.is-on { animation: cprPulse 0.4s ease-out; }
@keyframes cprPulse { 0% { transform: scale(1.5); background: var(--color-brand); } 100% { transform: scale(1); background: var(--color-brand-soft); } }
.cpr__sound { align-self: center; }

/* Health card */
.hcard-wrap { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) { .hcard-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.hcard-form { display: grid; gap: var(--space-4); }
.hcard-form input, .hcard-form select, .hcard-form textarea, .reminder input, .reminder select {
    width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-line); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-base);
}
.hcard-form .field, .reminder .field { display: grid; gap: var(--space-2); min-width: 0; }
.hcard-form .field-row, .reminder .field-row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .hcard-form .field-row, .reminder .field-row { grid-template-columns: 1fr 1fr; } }
.hcard {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    max-width: 440px;
    padding: var(--space-5);
    border: 2px solid var(--color-brand);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.hcard__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-weight: var(--weight-bold); letter-spacing: 0.06em; color: var(--color-brand-ink); }
.hcard__body { display: grid; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.hcard__body div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-2); }
.hcard__body dt { color: var(--color-text-muted); }
.hcard__body dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.hcard__foot { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px dashed var(--color-line); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.reminder { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.reminder h3 { margin: 0; }

/* ---------- Print ----------
   Default print = the whole guide. "Print sheet" = emergency numbers + first aid + health numbers.
   "Print my card" = only the health card. */
@media print {
    .site-header, .site-footer, .action-bar, .skip-link, .no-print, .page-hero::after { display: none !important; }
    body { background: #fff; padding: 0; font-size: 11pt; }
    .section { padding: 10pt 0 !important; background: none !important; }
    .print-only { display: block; }
    .print-brand { margin-bottom: 8pt; font-size: 9pt; font-weight: bold; color: #000; }
    a { color: #000 !important; text-decoration: none !important; }
    .enums { grid-template-columns: repeat(3, 1fr); gap: 6pt; }
    .enum a, .fa, .hnum { border: 1px solid #999 !important; background: #fff !important; padding: 6pt !important; }
    .fa-grid { grid-template-columns: repeat(2, 1fr); gap: 8pt; }
    .hnums { grid-template-columns: repeat(2, 1fr); gap: 8pt; }
    body.print-sheet #health-card, body.print-sheet #timers { display: none !important; }
    body.print-card main > section:not(#health-card), body.print-card .hcard-form, body.print-card .reminder { display: none !important; }
    body.print-card .hcard { position: static; width: 9cm; max-width: none; padding: 8pt; border: 1.5pt solid #000; }
    body.print-card .hcard__body { font-size: 8.5pt; }
    body.print-card .hcard__body div { grid-template-columns: 2.6cm 1fr; }
    body:not(.print-card) .hcard { break-inside: avoid; }
}