/* Guides and the rent receipt tool — classes prefixed gd- (guides) and rc- (receipt).
   The intro and closing band reuse about-page.css. */

/* Guide list */
.gd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.gd-list a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.gd-list a:hover { border-color: var(--accent); }
.gd-list strong { font-family: var(--display); font-size: 1.35rem; line-height: 1.2; }
.gd-list span { color: var(--ink-2); text-align: left; }
.gd-list .gd-go { margin-top: auto; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--sky); }

/* Article text */
.gd-article { max-width: 44em; margin-inline: auto; }
.gd-article h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.2rem 0 .6rem; }
.gd-article h2:first-child { margin-top: 0; }
.gd-article p, .gd-article li { font-size: 1.08rem; line-height: 1.65; text-align: left; }
.gd-article p { margin: 0 0 1rem; }
.gd-article ul { list-style: disc; }
.gd-article ol { list-style: decimal; }
.gd-article ul, .gd-article ol { margin: 0 0 1.2rem; padding-left: 1.3em; }
.gd-article li { margin-bottom: .45rem; }
.gd-article a { color: var(--ink); text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gd-article a:hover { text-decoration-color: var(--ink); }
.gd-note { background: var(--panel); border-left: 4px solid var(--sky); border-radius: var(--r-md); padding: 16px 18px; margin: 1.4rem 0; }
.gd-note p:last-child { margin-bottom: 0; }
.gd-meta { color: var(--ink-2); font-size: .95rem; margin-bottom: 1.6rem; }
.gd-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: 1rem; }
.gd-table th, .gd-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.gd-table th { background: var(--panel); }
.gd-table-wrap { overflow-x: auto; }

@media (min-width: 700px) { .gd-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .gd-list { grid-template-columns: repeat(3, 1fr); } }

/* Rent receipt tool: form on the left, receipt on the right */
.rc-grid { display: grid; gap: 24px; align-items: start; }
.rc-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; display: grid; gap: 14px; }
.rc-form label { display: grid; gap: 6px; font-weight: 600; }
.rc-form input, .rc-form select { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong, #8A94AB); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink); }
.rc-form input:focus-visible, .rc-form select:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.rc-row { display: grid; gap: 14px; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-status { margin: 0; min-height: 1.4em; color: var(--ink-2); }

.rc-sheet { background: #fff; color: #111; border: 2px solid #0A1B4D; border-radius: var(--r-md); padding: clamp(18px, 3vw, 30px); }
.rc-sheet h2 { font-size: 1.6rem; margin: 0; color: #0A1B4D; }
.rc-biz { margin: 2px 0 14px; font-weight: 600; color: #333; text-align: left; }
.rc-sheet dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.rc-sheet dt { color: #555; }
.rc-sheet dd { margin: 0; font-weight: 600; word-break: break-word; }
.rc-amount { margin: 16px 0; padding: 12px 14px; background: #EEF3FF; border-radius: 8px; }
.rc-amount strong { display: block; font-family: var(--display); font-size: 1.9rem; color: #0A1B4D; }
.rc-amount span { color: #444; font-size: .95rem; }
.rc-foot { margin: 16px 0 0; color: #555; font-size: .9rem; text-align: left; }

@media (min-width: 900px) { .rc-grid { grid-template-columns: 1fr 1fr; } .rc-row { grid-template-columns: 1fr 1fr; } }

/* Printing: show only the receipt */
@media print {
  body * { visibility: hidden; }
  .rc-sheet, .rc-sheet * { visibility: visible; }
  .rc-sheet { position: absolute; left: 0; top: 0; width: 100%; border-color: #000; }
}