/* Additional methods share the existing paper, ink and vermilion palette. */
.traditional-input-mount { grid-column: 1 / -1; min-width: 0; }
.traditional-result-mount, .traditional-result { min-width: 0; }
.traditional-small { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.traditional-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 44px; padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); font-size: 13px; }
.traditional-button:hover { border-color: #bfcbbd; background: var(--soft); }
.traditional-button-primary { border-color: var(--ink); background: var(--ink); color: var(--panel); }
.traditional-button-primary:hover { border-color: #375647; background: #375647; }
.traditional-source { color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.traditional-source:hover { color: var(--ink); }
.traditional-sources { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }

.six-lines-input { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: var(--space-4); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.six-lines-input-copy { min-width: 0; }
.six-lines-input-title { margin: 0 0 var(--space-1); font: 500 20px/1.5 var(--serif); }
.six-lines-input-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.six-lines-progress { margin: var(--space-2) 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.six-lines-input-status { margin-top: 4px; min-height: 21px; }
.six-lines-input-note { margin-top: var(--space-2); }
.six-lines-latest { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.six-lines-latest > .traditional-small { flex-basis: 100%; }
.six-lines-coin { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; border: 1px solid #cbd2c4; border-radius: 50%; background: var(--panel); font: 13px/1 var(--serif); }
.six-lines-toss-total { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.six-lines-input-list { display: grid; align-content: start; gap: 0; min-width: 0; padding: var(--space-1) var(--space-2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.six-lines-input-row { display: grid; grid-template-columns: 32px minmax(44px, 1fr) 76px; align-items: center; gap: var(--space-2); min-height: 39px; border-bottom: 1px solid var(--line); font-size: 12px; }
.six-lines-input-row:last-child { border-bottom: 0; }
.six-lines-input-position { color: var(--muted); }
.six-lines-input-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.six-lines-input-moving .six-lines-input-value { color: var(--red); }
.six-lines-input-pending .six-lines-input-value { color: var(--muted); }
.six-lines-pending-line { justify-self: center; width: min(100%, 100px); border-top: 1px dashed var(--line); }
.six-lines-yao { display: inline-flex; justify-self: center; gap: 13px; width: min(100%, 104px); height: 7px; }
.six-lines-yao-segment { flex: 1; min-width: 0; border-radius: 1px; background: var(--ink); }
.six-lines-yao-moving .six-lines-yao-segment { background: var(--red); }

.six-lines-moving-summary { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-block: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.six-lines-hexagram-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.six-lines-hexagram-card { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.six-lines-card-heading { width: 100%; text-align: center; }
.six-lines-card-heading h3 { margin: 0 0 4px; font-size: 14px; }
.six-lines-card-heading .traditional-small { display: block; }
.six-lines-figure { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); width: min(100%, 164px); min-height: 176px; margin: var(--space-1) 0; }
.six-lines-figure-row { display: grid; grid-template-columns: 16px minmax(0, 104px) 16px; align-items: center; justify-content: center; gap: 8px; min-height: 8px; }
.six-lines-figure-label { color: #8c9785; font: 11px/1 var(--serif); }
.six-lines-figure-moving { color: var(--red); font-size: 10px; line-height: 1; }
.six-lines-hexagram-number { margin: 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.six-lines-hexagram-name { margin: var(--space-1) 0; font: 500 26px/1.5 var(--serif); text-align: center; overflow-wrap: anywhere; }
.six-lines-trigram-caption { margin-bottom: var(--space-3); }
.six-lines-read { width: 100%; margin-top: auto; }
.six-lines-figure-note { margin: var(--space-2) 0 var(--space-3); }
.traditional-details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.traditional-details-heading { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); font-size: 14px; cursor: pointer; list-style: none; }
.traditional-details-heading::-webkit-details-marker { display: none; }
.traditional-details-heading::after { margin-left: auto; color: var(--muted); font-size: 18px; content: "+"; }
.traditional-details[open] > .traditional-details-heading::after { content: "−"; }
.traditional-details-body { padding: 0 var(--space-3) var(--space-3); }
.six-lines-line-table { width: 100%; margin: 0 0 var(--space-2); border-collapse: collapse; font-size: 13px; text-align: left; }
.six-lines-line-table caption { padding: 0 0 var(--space-2); text-align: left; }
.six-lines-line-table th, .six-lines-line-table td { padding: var(--space-1); border-bottom: 1px solid var(--line); font-weight: 400; overflow-wrap: anywhere; }
.six-lines-line-table thead th { color: var(--muted); font-size: 12px; }
.six-lines-line-table th:first-child { width: 20%; padding-left: 0; }
.six-lines-line-table td:last-child, .six-lines-line-table th:last-child { padding-right: 0; }
.six-lines-moving-row td { color: var(--red); }

.liu-ren-final { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-align: center; }
.liu-ren-final-name { margin: var(--space-1) 0; font: 500 40px/1.4 var(--serif); letter-spacing: 4px; }
.liu-ren-keyword { margin: 0; color: var(--red); font-size: 13px; }
.liu-ren-reflection { margin: var(--space-2) auto 0; max-width: 460px; color: var(--muted); font: 15px/1.8 var(--serif); overflow-wrap: anywhere; }
.liu-ren-palaces { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-3) 0; padding: 0; list-style: none; }
.liu-ren-palace { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: var(--space-2) 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.liu-ren-palace-name { font: 17px/1.5 var(--serif); white-space: nowrap; }
.liu-ren-palace-current { border-color: #c58978; background: #f8eee7; }
.liu-ren-palace-current .liu-ren-palace-name { color: var(--red); }
.liu-ren-process { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.liu-ren-process-heading { margin: 0 0 var(--space-1); font-size: 14px; }
.liu-ren-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.liu-ren-step { min-width: 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.liu-ren-step-heading { display: flex; flex-direction: column; gap: 4px; }
.liu-ren-step-heading > strong { font-size: 14px; font-weight: 500; }
.liu-ren-step-calculation { margin: var(--space-2) 0; font-size: 14px; overflow-wrap: anywhere; }
.liu-ren-step-calculation strong { font-weight: 500; color: var(--red); }
.liu-ren-index-note { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.liu-ren-meaning-note { margin-top: var(--space-2); }

@media (max-width: 760px) {
  .six-lines-input { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .liu-ren-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .liu-ren-step-heading { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1); }
  .liu-ren-step-calculation { margin: var(--space-1) 0; }
}
@media (max-width: 480px) {
  .six-lines-input { padding: var(--space-2); }
  .six-lines-input-actions .traditional-button-primary { flex: 1 1 auto; }
  .six-lines-input-row { grid-template-columns: 32px minmax(44px, 1fr) 76px; gap: var(--space-1); }
  .six-lines-hexagram-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .six-lines-hexagram-card { padding: var(--space-3); }
  .six-lines-moving-summary { padding-inline: var(--space-2); }
  .traditional-details-heading { padding-inline: var(--space-2); }
  .traditional-details-body { padding: 0 var(--space-2) var(--space-2); }
  .six-lines-line-table { font-size: 12px; }
  .six-lines-line-table th, .six-lines-line-table td { padding-inline: 4px; }
  .liu-ren-final { padding: var(--space-3); }
  .liu-ren-final-name { font-size: 36px; }
  .liu-ren-palaces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .liu-ren-palace { padding-block: var(--space-1); }
  .liu-ren-process { padding: var(--space-2); }
}