.create {
  padding: clamp(24px, 4vw, 48px);
  background: #16283d;
}

.create p { max-width: 760px; }

#birth-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

#birth-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--muted);
}

#birth-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#birth-form legend { margin-bottom: 8px; font-size: 11px; letter-spacing: 1.2px; color: var(--muted); }
.field-name, .field-question, .field-consent, #create-button { grid-column: 1 / -1; }
.birth-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.time-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.calendar-choice, .gender-choice { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.calendar-choice legend, .gender-choice legend { width: 100%; }
.calendar-choice label, .gender-choice label { flex-direction: row !important; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); color: var(--ivory) !important; letter-spacing: 0 !important; }
.calendar-choice small, .field-question small { width: 100%; color: var(--muted); letter-spacing: 0; line-height: 1.55; }
.unknown-time { grid-column: 1 / -1; flex-direction: row !important; align-items: center; letter-spacing: 0 !important; color: var(--ivory) !important; }
.calendar-choice label:has(input:checked), .gender-choice label:has(input:checked) { border-color: var(--gold); background: #263c4d; }
.field-consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; letter-spacing: 0 !important; line-height: 1.5; }
#create-button { padding: 15px; background: var(--gold); color: var(--navy); font-weight: 700; letter-spacing: 1.6px; }
#form-generation-status { grid-column: 1 / -1; min-height: 1.5em; color: var(--gold); font-size: 13px; }
#birth-form textarea { min-height: 110px; }

.generation-status { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.generation-status p { margin: 0; }
.status-loader { width: 18px; height: 18px; flex: 0 0 auto; border: 2px solid #ffffff40; border-top-color: var(--gold); border-radius: 50%; animation: status-spin .8s linear infinite; }
@keyframes status-spin { to { transform: rotate(360deg); } }

.saju-term-mark { margin-left: 2px; color: #765522; font-size: 10px; }
.saju-term-mark a { color: inherit; text-underline-offset: 2px; }
.chapter-notes { max-width: 760px; margin-top: 34px; padding-top: 18px; border-top: 1px solid #d4c6b2; color: #675f55; }
.chapter-notes p { margin: 7px 0; font-size: 12px; line-height: 1.55; }
.chapter-notes p:target { background: #f0dfbb; }
.chapter-notes a { font-size: 14px; color: #765522; }
.chapter.pending { border-top-color: #718a93; }
.chapter.pending > p { color: #6d7477; font-style: italic; }

.plan-context { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.plan-context span { padding: 5px 10px; border: 1px solid var(--line); font-size: 12px; }
#generated-plan { color: var(--navy); background: var(--gold); border-color: var(--gold); font-weight: 700; }
#plan-legend { margin: 5px 0 18px; color: var(--muted); font-size: 12px; }
.progress-label { display: block; margin: 12px 0 3px; color: var(--muted); font-size: 11px; letter-spacing: .7px; }
.aside-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aside-head h2 { margin-bottom: 0; }
#toc-close { display: none; border: 0; padding: 4px 10px; font-size: 24px; }
.toc-toggle { display: none; position: sticky; top: 66px; z-index: 15; margin: 0 0 14px; background: var(--gold); color: var(--navy); font-weight: 700; }
.toc-domain { border-bottom: 1px solid #ffffff18; }
.toc-domain summary { padding: 13px 8px; color: var(--gold); font-size: 12px; font-weight: 700; }
#toc .toc-domain a[aria-current="location"] { background: #314c56; border-left-color: var(--gold); color: #fff; }
.chapter-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 12px 0; background: var(--navy); }
.chapter-nav button { padding: 8px; font-size: 11px; }

@media (max-width: 800px) {
  #birth-form { grid-template-columns: 1fr; }
  .birth-parts { grid-template-columns: repeat(3, 1fr); }
  .time-parts { grid-template-columns: repeat(2, 1fr); }
  .chapter-notes p { font-size: 12px; line-height: 1.55; }
  .toc-toggle { display: inline-block; }
  #reading-nav { display: none; position: fixed; inset: 0 0 0 auto; z-index: 40; width: min(88vw, 390px); max-height: 100vh; overflow: auto; margin: 0; padding: 24px; box-shadow: -12px 0 28px #0008; }
  #reading-nav.open { display: block; }
  #toc-close { display: inline-block; }
  #toc { display: block; max-height: none; overflow: visible; }
  #toc > details { min-width: 0; }
  .chapter-nav { background: #1d3040; }
}
.term { position: relative; display: inline; }
.chapter .term-trigger { display: inline; padding: 0; border: 0; border-radius: 0; font: inherit; line-height: inherit; color: inherit; background: transparent; letter-spacing: inherit; text-align: inherit; }
.term-trigger sup { color: #80602e; font-size: .7em; margin-left: 2px; }
.term-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 25; width: min(270px,70vw); padding: 12px 15px; border-radius: 6px; background: #172a3e; color: #fff; font: 13px/1.6 Arial,'Malgun Gothic',sans-serif; box-shadow: 0 5px 18px #0003; }
.term:hover .term-tooltip,.term:focus-within .term-tooltip,.term.show-tip .term-tooltip { display: block; }
.chapter .term-trigger:hover { background: transparent; }
.toc-chapter > summary { list-style: none; padding: 0; }
#toc .toc-subtopic { font-size: 11px; margin-left: 17px; color: var(--muted); }
#toc a[aria-current="location"] { background: #314c56; border-left-color: var(--gold); color: white; }
.locked-subtopic { color: #726b60; }
body[data-view="input"] .report-intro,body[data-view="input"] .book,body[data-view="input"] .toc-toggle,body[data-view="input"] #save,body[data-view="input"] #print,body[data-view="input"] #new-reading { display: none !important; }
body[data-view="reading"] .create,body[data-view="reading"] .hero { display: none !important; }
body[data-view="input"] .create { margin-top: 0; }
@media print { .term-tooltip { display: none !important; } .toc-toggle { display: none !important; } }