/* The chart room. Sits on pie.css (the night, the paper slips, her type) and adds what a chart needs. One explicit theme,
   no dark mode switch (her standing rule). Phone first: every reading size is 16px or more. */
main.chartroom { max-width: 1480px; justify-items: stretch; gap: 20px; }
.chartroom > * { width: 100%; max-width: 760px; justify-self: center; }
.chartroom > .modules { max-width: none; }
.room-head { text-align: center; padding-top: 44px; }
.room-head h1 { margin: 6px 0 6px; font-size: 34px; color: #ffe9a8; }
.aside { font: italic 17px/1.5 Lora, Georgia, serif; color: #e9d9cf; margin: 0; }
.chartroom .paper { width: 100%; font-size: 17px; }
.chartroom h2 { margin: 0 0 10px; font-size: 24px; color: #2a1c2e; }
.chartroom h3 { margin: 18px 0 8px; font-size: 19px; color: #2a1c2e; }
.chartroom .small { font-size: 16px; color: #5e3a17; }
.how { font: italic 16px/1.5 Lora, Georgia, serif; color: #5e3a17; background: #f6ebd9; border-left: 3px solid #c9b293; padding: 6px 10px; margin: 10px 0 4px; }
.how-label { font-style: normal; font-weight: 600; }

/* buttons and fields */
.chartroom button, .chartroom input, .chartroom select, .chartroom textarea { font: 16px 'Crimson Pro', Georgia, serif; }
.chartroom .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.plain { padding: 6px 12px; border: 1.5px solid #2a1c2e; border-radius: 999px; background: #fffdf6; color: #2a1c2e; cursor: pointer; font-style: italic !important; font-family: Lora, Georgia, serif !important; }
.plain.on, .plain:hover, .plain:focus-visible { background: #2a1c2e; color: #ffe9a8; outline: none; }
.go { padding: 8px 16px; border: 2px solid #2a1c2e; border-radius: 4px; background: #2a1c2e; color: #ffe9a8; font: italic 17px Lora, Georgia, serif !important; cursor: pointer; margin-top: 8px; }
.go:hover, .go:focus-visible { background: #4e1230; outline: none; }
.go:disabled { opacity: .6; cursor: wait; }
.chartroom input[type=text], .chartroom input[type=search], .chartroom input[type=date], .chartroom input[type=time], .chartroom input[type=number],
.chartroom input[type=datetime-local], .chartroom input[type=month], .chartroom select, .chartroom textarea {
  padding: 7px 9px; border: 2px solid #2a1c2e; border-radius: 4px; background: #fffdf6; color: #2a1c2e; min-width: 0; max-width: 100%; }
.chartroom textarea { width: 100%; resize: vertical; line-height: 1.45; }
.chartroom label { display: inline-flex; flex-direction: column; gap: 2px; }
.chartroom label.wide { display: flex; margin-top: 8px; }
.chartroom label.check { flex-direction: row; align-items: center; gap: 8px; margin: 10px 0 4px; }
.chartroom label.check input { width: 20px; height: 20px; }
.lab { font: italic 16px Lora, Georgia, serif; color: #5e3a17; }
.oops { color: #7a2e55 !important; }
.found { display: grid; gap: 4px; margin-top: 6px; }
.found button { text-align: left; padding: 7px 10px; border: 1.5px solid #c9b293; border-radius: 4px; background: #fbf3e6; color: #2a1c2e; cursor: pointer; }
.found button:hover, .found button:focus-visible { border-color: #7a2e55; background: #fff8ee; outline: none; }
.byhand summary, .fold summary { cursor: pointer; font-style: italic; padding: 4px 0; }
.byhand .row input { flex: 1 1 120px; }
.born p { margin: 6px 0; }

/* the chooser */
.kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.kind-chip { padding: 7px 13px; border: 1.5px solid #2a1c2e; border-radius: 999px; background: #fffdf6; color: #2a1c2e; cursor: pointer; font-size: 16px; line-height: 1.2; }
.kind-chip.on { background: #2a1c2e; color: #ffe9a8; }
.kind-chip:focus-visible { outline: 3px dashed #7a2e55; outline-offset: 2px; }
.kind-chip.coming { border-style: dashed; color: #8a7560; background: transparent; cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.kind-chip .tag { font: italic 16px Lora, Georgia, serif; color: #8a7560; }

/* the modules: one under another on a phone, side by side when there is room */
.modules { display: grid; gap: 20px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.module { min-width: 0; }
.module-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.shut { flex: none; width: 36px; height: 36px; border: 1.5px solid #2a1c2e; border-radius: 50%; background: #fffdf6; color: #2a1c2e; font-size: 20px; line-height: 1; cursor: pointer; }
.shut:hover, .shut:focus-visible { background: #2a1c2e; color: #ffe9a8; outline: none; }
.when-pick { margin: 4px 0 8px; }
.nothing { text-align: center; }

/* tables */
.scroll { overflow-x: auto; margin: 6px 0; }
.grid { border-collapse: collapse; width: 100%; font-size: 16px; }
.grid caption { text-align: left; font: italic 17px Lora, Georgia, serif; color: #2a1c2e; padding: 4px 0; }
.grid th, .grid td { padding: 5px 6px 5px 0; border-bottom: 1px solid #ddc9ab; text-align: left; vertical-align: top; }
.grid thead th { font-weight: normal; border-bottom: 1.5px solid #c9b293; vertical-align: bottom; }
.grid tbody th { font-weight: normal; white-space: nowrap; }
.grid td { white-space: nowrap; }
.grid td.range { white-space: normal; }
.fname { display: block; font-weight: 600; color: #2a1c2e; }
.jur { display: block; font: italic 16px/1.2 Lora, Georgia, serif; color: #7a2e55; }
.glyph { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", Georgia, serif; }
.body .glyph { display: inline-block; min-width: 1.1em; text-align: center; font-size: 18px; }
.rx { color: #7a2e55; }

/* aspect lists */
.asp { list-style: none; margin: 4px 0 8px; padding: 0; }
.asp li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid #e3d2b8; }
.asp .pair { flex: 1 1 auto; }
.asp .kind { font-style: italic; color: #5e3a17; }
.asp .orb, .asp .when { color: #5e3a17; }
.asp .when { flex-basis: 100%; font-style: italic; }
.count { font-style: normal; color: #8a7560; }
.sing { font: italic 16px Lora, Georgia, serif; color: #7a2e55; }
.layer { border-top: 2px solid #c9b293; margin-top: 12px; padding-top: 4px; }
.layer-hum h3 { color: #5e3a17; }

/* the wheel */
.wheel-slip { margin: 0 -8px; }
.wheel { display: block; width: 100%; max-width: 640px; margin: 0 auto; height: auto; }
.w-edge { fill: #f7ecdb; stroke: #2a1c2e; stroke-width: 2; }
.w-zod { fill: #fbf5ea; stroke: #2a1c2e; stroke-width: 1.5; }
.w-core { fill: #fffdf6; stroke: #2a1c2e; stroke-width: 1.2; }
.w-sign-edge { stroke: #2a1c2e; stroke-width: 1.2; }
.w-tick { stroke: #8a7560; stroke-width: 1; }
.w-sign { font: 22px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", Georgia, serif; text-anchor: middle; dominant-baseline: central; }
.w-el0 { fill: #b0412a; } .w-el1 { fill: #4f7a2a; } .w-el2 { fill: #8a6a1a; } .w-el3 { fill: #2f5f9a; }
.w-cusp { stroke: #8a7560; stroke-width: 1; }
.w-angle { stroke: #2a1c2e; stroke-width: 2.4; }
.w-house { font: 20px/1 'Crimson Pro', Georgia, serif; fill: #8a7560; text-anchor: middle; dominant-baseline: central; }
.w-asp { stroke-width: 1.1; }
.w-asp.hard { stroke: #c4303a; }
.w-asp.easy { stroke: #3f5fc0; }
.w-asp.fine { stroke: #a99a86; stroke-dasharray: 3 3; }
.w-mark { stroke-width: 2; }
.w-body { font: 24px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", Georgia, serif; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #fbf5ea; stroke-width: 3px; }
.w-rx { font: 16px/1 'Crimson Pro', Georgia, serif; fill: #7a2e55; text-anchor: middle; dominant-baseline: central; }
.w-moonrange { fill: none; stroke: #7f8296; stroke-width: 7; stroke-linecap: round; opacity: .5; }

/* ask a person */
.ask .word { font: 34px/1.2 Rye, Georgia, serif; color: #2a1c2e; letter-spacing: .04em; margin: 4px 0 8px; word-break: break-all; }
.ask .word-small { font-weight: 600; letter-spacing: .03em; }
.asked { list-style: none; padding: 0; margin: 6px 0; }
.asked li { padding: 6px 0; border-bottom: 1px solid #e3d2b8; }
.reply { margin: 8px 0; padding: 8px 12px; background: #fffdf6; border-left: 3px solid #7a2e55; white-space: pre-wrap; }

.credits { text-align: center; font: italic 16px/1.5 Lora, Georgia, serif; color: #cfc6e6; }
.credits a { color: #ffe9a8; }
.chartroom > .doors { width: auto; justify-self: center; }

@media (max-width: 520px) {
  .chartroom .paper { padding: 14px 12px; }
  .grid th, .grid td { padding-right: 4px; }
}
/* what goes along with a question: the asker's choice (2026-10-12) */
.ask-form .sends { border: 1.5px solid #c9b293; border-radius: 4px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.ask-form .sends legend { padding: 0 4px; font-style: italic; color: #5e3a17; }
.ask-form .sends .check { align-items: flex-start; }
.ask-form input[type="text"] { font: 16px 'Crimson Pro', Georgia, serif; padding: 6px 8px; border: 2px solid #2a1c2e; border-radius: 4px; background: #fffdf6; color: #2a1c2e; }