/* FMySchool demand letter: form, A4 preview and print styles. Loaded only on the letter page. */

/* ---------- Form ---------- */
.req { color: #B42318; font-weight: 800; }
.letter-page .label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
.pair { display: grid; gap: .5rem; }
@media (min-width: 480px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 700; color: var(--slate); margin: 0; }
.pair input, .pair textarea { width: 100%; font: inherit; font-weight: 400; color: var(--charcoal); background: var(--white); border: 1.5px solid var(--slate); border-radius: 6px; padding: .55rem .65rem; min-height: 44px; }
.letter-page .field input[type="number"], .letter-page .field input[type="month"] {
  width: 100%; font: inherit; color: var(--charcoal); background: var(--white);
  border: 1.5px solid var(--slate); border-radius: 6px; padding: .6rem .7rem; min-height: 44px;
}
.field--inline { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.field--inline select { width: auto !important; }
.issue { border: 1px solid var(--line); border-radius: 8px; margin: .6rem 0; background: var(--white); }
.issue__toggle { display: flex; gap: .6rem; align-items: center; padding: .7rem .8rem; font-weight: 700; color: var(--navy); cursor: pointer; margin: 0; }
.issue__toggle input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--navy); }
.issue__fields { padding: 0 .8rem .4rem; border-top: 1px dashed var(--line); }
.issue--disabled .issue__toggle { color: var(--slate); cursor: not-allowed; opacity: .7; }

/* ---------- "Next to fill in" box (below the intro warnings) ---------- */
.next-field { border: 2px solid var(--navy); border-left-width: 6px; border-radius: var(--radius); background: var(--white); padding: .85rem 1.1rem; margin: 0 0 1.5rem; }
.next-field__label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin: 0 0 .25rem; }
.next-field__text { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin: 0 0 .6rem; }
.next-field__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0; }
.next-field__actions .btn--small { min-height: 40px; padding: .45rem 1rem; font-size: .95rem; }
.next-field .btn--secondary { background: var(--lime); color: var(--navy); border-color: var(--navy); }
.next-field .btn--secondary:hover { background: var(--navy); color: var(--lime); }
.next-field__count { font-size: .9rem; color: var(--slate); }
.next-field__notes { margin: .7rem 0 0; padding: .6rem .8rem .6rem 1.8rem; background: var(--tint); border-radius: 6px; font-size: .95rem; }
.next-field--recommended { border-color: var(--blue); }
.next-field--done { border-color: var(--blue); background: var(--tint); }
.next-field--done .next-field__actions { display: none; }
.tx-link { font: inherit; font-size: .95rem; font-weight: 700; background: none; border: 0; padding: .4rem 0; cursor: pointer; color: var(--blue-text); text-decoration: underline; text-underline-offset: .15em; }
.tx-link[hidden] { display: none; }

/* ---------- Your answers beside the letter from 820 px wide (was 1000 px) ---------- */
@media (min-width: 820px) {
  .letter-page .letter-layout { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 2rem; }
}

/* ---------- Preview language toggle: one letter on screen at a time ---------- */
.lt-toggle { display: inline-flex; border: 2px solid var(--navy); border-radius: 999px; overflow: hidden; margin: 0 0 .8rem; }
.lt-toggle__btn { font: inherit; font-size: .95rem; font-weight: 800; color: var(--navy); background: var(--white); border: 0; padding: .5rem 1rem; min-height: 44px; cursor: pointer; }
.lt-toggle__btn + .lt-toggle__btn { border-left: 2px solid var(--navy); }
.lt-toggle__btn[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.lt-scale[data-preview-lang="zh"] .lt-en, .lt-scale[data-preview-lang="en"] .lt-zh { display: none; }

/* ---------- Intro notices side by side from 820 px ---------- */
@media (min-width: 820px) {
  .notice-list--row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .notice-list--row .notice { margin: 0; height: 100%; }
}
.letter-form .next-field { margin: 0 0 1.25rem; }

/* ---------- Toolbar above the preview: language toggle + Print / Word / Copy (sticks under the header) ---------- */
.letter-toolbar {
  position: sticky; top: 64px; z-index: 5; background: var(--plaster);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  padding: 0 0 .6rem; margin: 0 0 .4rem; border-bottom: 1px solid var(--line);
}
@media (max-width: 819px) { .letter-toolbar { position: static; } } /* phones: the letter is short when scaled; keep the screen for it */
.letter-toolbar .lt-toggle { margin: 0; }
.letter-toolbar .lt-toggle__btn { padding: .45rem .95rem; }
.letter-toolbar .letter-actions__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.letter-toolbar .letter-actions__buttons .btn { flex: none; min-height: 44px; padding: .5rem 1.05rem; font-size: .95rem; }
.letter-toolbar .btn[disabled] { opacity: .45; cursor: not-allowed; }
.letter-status { margin: .2rem 0 .5rem; }
.letter-status:empty { display: none; }

/* ---------- Notes under the letter, and the same notes in the one-time pop-up ---------- */
.letter-notes { margin: 1.25rem 0; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .95rem; }
.letter-notes__title { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--navy); }
.letter-notes ul, .letter-tips ul { margin: 0; padding-left: 1.1rem; }
.letter-notes li, .letter-tips li { margin: 0 0 .45rem; line-height: 1.5; }
.case-ref { white-space: nowrap; }
.letter-tips__title { font-size: 1.2rem; margin: 0 0 .75rem; color: var(--navy); }
.letter-tips__title:focus { outline: none; }
.letter-tips ul { margin-bottom: 1.1rem; }
.letter-tips__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.beta-dialog.letter-tips .btn { width: auto; }

/* ---------- Phones: floating jump between answers and preview ---------- */
.lt-jump {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  background: var(--navy); color: var(--white); font-weight: 800; text-decoration: none;
  border: 2px solid var(--white); border-radius: 999px; padding: .7rem 1.15rem; min-height: 44px;
  box-shadow: 0 4px 14px rgba(18, 48, 79, .3);
}
.lt-jump:hover, .lt-jump:focus-visible { background: var(--lime); color: var(--navy); }
@media (min-width: 820px) { .lt-jump { display: none !important; } }

/* ---------- Checker and actions ---------- */
.letter-page .letter-actions { display: block; }
.letter-page .letter-actions .hint { margin: .45rem 0 0; }
.letter-actions__buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.letter-actions__buttons .btn { flex: 1 1 11rem; }
.letter-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.checker { margin: .9rem 0; font-size: .95rem; }
.checker p { margin: .5rem 0 .25rem; }
.checker__title { font-weight: 800; color: var(--navy); }
.checker__ok { font-weight: 700; color: #1E6B3A; }
.checker ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.checker__errors li { color: #8A1C12; margin-bottom: .2rem; }
.checker__warnings li { color: var(--charcoal); margin-bottom: .2rem; }

/* ---------- Delivery guide ---------- */
.delivery { background: var(--tint); border: 2px solid var(--navy); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1rem 0 1.5rem; }
.delivery__steps li { margin-bottom: .6rem; }
.copy-snippet { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .25rem 0; }
.copy-snippet code { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: .15rem .4rem; font-family: inherit; }
.btn-copy-snip { font: inherit; font-size: .85rem; font-weight: 700; color: var(--navy); background: var(--white); border: 1.5px solid var(--navy); border-radius: 999px; padding: .15rem .7rem; cursor: pointer; }

/* ---------- The letter (preview = print typography) ---------- */
/* min-width: 0 lets the grid column shrink, so the A4 sheet is scaled down instead of widening the page. */
.letter-page .letter-preview, .letter-page .letter-form { min-width: 0; }
.lt-frame { overflow: hidden; width: 100%; }
.lt-doc { display: flex; flex-direction: column; gap: 12mm; }
.lt-sheet {
  position: relative; box-sizing: border-box; width: 210mm; min-height: 297mm;
  padding: 37mm 26mm 35mm 28mm; background: #FFFFFF; color: #000000;
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(18, 48, 79, .12);
  font-family: "Times New Roman", "SimSun", "宋体", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  font-size: 12pt; font-weight: 400; letter-spacing: 0;
}
.lt-sheet p { margin: 0; color: #000000; }
.lt-gap { background: #FFE58A; color: #000000; padding: 0 .1em; }

/* Chinese: 小四 12pt, fixed 22pt lines, first-line indent of two characters, justified. */
.lt-zh { line-height: 22pt; text-align: justify; }
.lt-zh .lt-p { text-indent: 2em; }
.lt-zh .lt-title { font-size: 16pt; font-weight: 700; text-align: center; line-height: 28pt; margin-bottom: 6pt; }
.lt-zh .lt-subtitle { text-align: center; margin-bottom: 6pt; }
.lt-zh .lt-recipient { margin-top: 12pt; }
.lt-zh .lt-h { font-weight: 700; }
/* English: 12pt, line height 1.5, no first-line indent, 6pt between paragraphs. */
.lt-en { line-height: 1.5; text-align: left; }
.lt-en p { margin-bottom: 6pt; }
.lt-en .lt-trans { font-size: 10.5pt; font-weight: 700; margin-bottom: 12pt; }
.lt-en .lt-title { font-size: 16pt; font-weight: 700; text-align: center; }
.lt-en .lt-subtitle { text-align: center; }
.lt-en .lt-recipient { margin-top: 6pt; }
.lt-en .lt-h { font-weight: 700; }
/* Attachments: "附件：1. …" with later items aligned under the first. Not indented. */
.lt-att { display: flex; text-indent: 0; }
.lt-att__label { flex: none; }
.lt-att__items p { text-indent: 0; }
.lt-en .lt-att { margin-bottom: 6pt; }
.lt-en .lt-att__items p { margin-bottom: 0; }
/* Signature block: right-aligned, kept together, with room for the handwritten signature. */
.lt-sig { text-align: right; margin-top: 12pt; break-inside: avoid; page-break-inside: avoid; }
.lt-sig p { text-indent: 0; margin-bottom: 0; }
.lt-sig__space { height: 44pt; }
.lt-en .lt-sig { margin-bottom: 12pt; }
/* Optional credit: in the bottom margin of the preview sheet; when printing it moves to the page margin box. */
.lt-credit { position: absolute; left: 28mm; bottom: 14mm; font-size: 8pt; color: #777777 !important; }

/* ---------- Print: A4 modelled on GB/T 9704-2012, only the letter ---------- */
@media print {
  @page {
    size: A4;
    margin: 37mm 26mm 35mm 28mm;
    @bottom-center { content: "第 " counter(page) " 页 共 " counter(pages) " 页"; font: 10.5pt "Times New Roman", "SimSun", serif; }
    /* Our own (empty) top margin box: Chrome and Edge then print no header (date and page title) of their own,
       just as the page-number box above replaces their footer (the web address). */
    @top-center { content: "\00a0"; }
  }
  html, body { background: #FFFFFF !important; }
  .letter-page main, .letter-page .wrap, .letter-page .letter-layout, .letter-page .letter-preview, .lt-frame { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; width: auto !important; overflow: visible !important; }
  .letter-page .no-print { display: none !important; }
  .lt-scale { zoom: 1 !important; transform: none !important; width: auto !important; }
  .lt-frame { height: auto !important; }
  .lt-doc { display: block; }
  .lt-sheet { width: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; }
  .lt-en { break-before: page; page-break-before: always; }
  /* Both letters always print, whichever one the preview toggle is showing. */
  .lt-scale .lt-sheet { display: block !important; }
  .lt-credit { display: none; }
}