/* Common presentation across existing pages; access rules stay in the API. */
:root { --font-size-body: 16px; --font-size-small: 14px; }
.shell { max-width: 1120px; }
.topbar { margin-bottom: 0; padding: 12px 0 20px; }
.brand { font-size: 22px; }
#page-navigation { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
#page-navigation a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text-secondary); border-bottom: 2px solid transparent; }
#page-navigation a[aria-current] { color: var(--accent-primary); border-color: var(--accent-primary); font-weight: 600; }
.app-frame { padding-top: 28px; }
.page-shell { width: 100%; min-width: 0; gap: 28px; }
.properties-wrap, .property-journal, .event-journal, .document-journal { max-width: 900px; margin-inline: auto; }
.auth-wrap, .create-wrap, .event-create-wrap:not(.event-journal), .uploader-landing-wrap { max-width: 720px; margin-inline: auto; }
h1 { font-size: clamp(24px, 3vw, 30px); }
.card, .list-item { box-shadow: none; }
.card > .row.spread { flex-wrap: wrap; }
.card h1, .card h2, .card h3, .property-meta { overflow-wrap: anywhere; }
.stack { gap: 18px; }
.create-card, .event-create-card, .auth-card { gap: 18px; }
.label { gap: 6px; color: var(--text-primary); font-size: 14px; }
.label > .hint { display: inline; }
input, select, textarea { font-size: 16px; min-height: 46px; background: #fff; }
textarea { resize: vertical; min-height: 110px; }
fieldset { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--border-subtle); }
legend { padding: 0 10px 0 0; font-size: 16px; font-weight: 600; }
button, .button { min-height: 44px; line-height: 1.4; }
.auth-feedback:empty, .field-error:empty { display: none; }
.back-link { display: inline-flex; align-items: center; min-height: 40px; text-underline-offset: 4px; }
.form-actions { flex-wrap: wrap; gap: 10px; }
.overview-property-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.overview-property-facts dt { font-size: 13px; }
.overview-property-facts dd { font-size: 15px; margin-top: 4px; }
.properties-header { background: transparent; border: 0; padding: 0; }
.properties-header > .row { flex-direction: row; align-items: center; }
#page-logout-btn { width: auto; padding: 8px 12px; font-size: 14px; }
.properties-actions { align-items: flex-start; }
.overview-owner-actions, .documentation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.overview-owner-actions { margin-top: 0; }
.auth-form-frame { min-height: 0; }
.rental-data-guidance { color: var(--text-secondary); font-size: 14px; background: transparent; border: 0; padding: 0; }
.next-step-panel { padding: 22px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 8px; }
.next-step-panel h2 { font-size: 20px; }
.supporting-details { border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.supporting-details > summary { font-size: 15px; color: var(--text-secondary); }
.supporting-details[open] > summary { margin-bottom: 12px; }
.event-document { background: #fff; }
.document-thumbnail { width: 160px; height: 120px; margin: 0 0 14px; display: grid; place-items: center; overflow: hidden; background: var(--bg-panel); border: 1px solid var(--border-subtle); border-radius: 6px; }
.document-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.document-thumbnail canvas { width: 100%; height: 100%; object-fit: contain; }
.document-thumbnail canvas[hidden] { display: none; }
.document-thumbnail { position: relative; }
.document-thumbnail-pdf-badge { position: absolute; bottom: 5px; right: 5px; padding: 2px 6px; border-radius: 3px; background: #183c34; color: #fff; font-size: 11px; font-weight: 700; }
.document-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; margin-top: 18px; }
.document-image-grid .document-thumbnail { width: 100%; }
.document-image-name { overflow-wrap: anywhere; }
.upload-selection-image { width: 100%; height: 120px; object-fit: contain; background: var(--bg-panel); border-radius: 6px; }
.document-thumbnail-open { grid-area: 1 / 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
.document-thumbnail-open:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: -3px; }
.document-thumbnail figcaption { grid-area: 1 / 1; pointer-events: none; }
.document-thumbnail figcaption { padding: 10px; font-size: 12px; color: var(--text-secondary); text-align: center; }
.event-document .form-actions { flex-direction: row; }
.event-document .form-actions button { width: auto; }
.upload-destination { border-left: 3px solid var(--accent-primary); padding-left: 18px; display: grid; gap: 8px; }
.upload-destination .eyebrow { font-size: 12px; letter-spacing: .04em; }
.upload-destination h2 { font-size: clamp(21px, 3vw, 26px); }
#created-upload-link { margin-top: 22px; padding: 20px; border: 1px solid var(--accent-primary); border-radius: 8px; background: var(--bg-main); }
#public-upload-content .card { padding: 24px; }
#public-upload-content input[type=file] { padding: 12px; }
#public-upload-content .auth-feedback.success { padding: 14px; background: var(--bg-panel); border-left: 3px solid var(--accent-primary); }
.document-journal #document-upload-panel { border-block: 1px solid var(--border-subtle); padding: 6px 0 18px; }
.document-journal #document-upload-panel > summary { color: var(--accent-primary); }
.document-journal #all-documents-filters { padding: 16px 0; }
@media (max-width: 639px) {
  .shell { padding: 16px; }
  .topbar { padding: 4px 0 14px; }
  .app-frame { padding-top: 22px; }
  #page-navigation { gap: 4px 14px; padding: 4px 0; font-size: 14px; }
  .card { padding: 20px; }
  .page-shell { gap: 24px; }
  .properties-header { padding: 0; }
  .properties-actions { flex-direction: row; }
  .overview-property-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-owner-actions, .documentation-actions { grid-template-columns: 1fr; }
  .next-step-panel, #public-upload-content .card { padding: 18px; }
  .event-journal nav.form-actions { flex-direction: row; }
  .event-journal .row.spread { flex-wrap: wrap; }
  .upload-destination { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.document-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.document-event-section { padding: 20px; border: 1px solid #d3dfda; border-radius: 8px; background: #fff; min-width: 0; }
.document-event-section > summary { min-height: 44px; cursor: pointer; color: #183c34; overflow-wrap: anywhere; }
.document-event-section > summary:focus-visible { outline: 3px solid #216b58; outline-offset: 4px; }
.document-event-title { font-size: 20px; font-weight: 600; }
.document-event-meta { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; }
.document-event-section[open] > summary { margin-bottom: 20px; }
.document-location-section { margin-top: 24px; min-width: 0; }
.document-location-section > h3 { margin-bottom: 12px; overflow-wrap: anywhere; }
.document-event-section .overview-event-card, .document-event-section .document-image-group { min-width: 0; }
.rental-period-list > .rental-period-card.rental-period-active { border: 1px solid #a9c4b8; border-left: 4px solid #22634f; border-radius: 8px; background: #edf5f0; padding: 20px; margin-bottom: 24px; }
.rental-period-card .rental-period-active-label { background: #22634f; color: #fff; font-weight: 600; }
.rental-period-card, .rental-period-form, .rental-period-close, .rental-period-section .label { min-width: 0; }
.rental-period-section input, .rental-period-section select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.rental-period-section input[type=date] { display: block; }
.rental-period-section input[type=date]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
.rental-period-events { margin-top: 20px; }
.rental-period-events h4 { margin: 0 0 10px; }
.rental-period-events ul { margin: 0; padding-left: 20px; }
.rental-period-events li + li { margin-top: 12px; }
.rental-period-events a { overflow-wrap: anywhere; }
.rental-event-date { display: block; font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.transfer-history ul { list-style: none; margin: 0; padding: 0; }
.transfer-history li { display: grid; gap: 4px; padding-block: 12px; border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
.transfer-history time { font-size: 14px; color: var(--text-secondary); }
.transfer-history li > p { margin: 0; }
.rental-period-close-details { margin-top: 20px; border-top: 1px solid var(--border-subtle); padding-top: 8px; min-width: 0; }
.rental-period-close-details > summary { min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 15px; }
.rental-period-close-details > summary:focus-visible { outline: 3px solid var(--accent-primary); outline-offset: 2px; }
@media (max-width: 639px) {
  .rental-period-close, .rental-period-form { grid-template-columns: minmax(0, 1fr); }
}
.field-help { min-width: 0; margin: 0; }
.field-help > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 8px; cursor: pointer; list-style: none; color: #356052; }
.field-help > summary::-webkit-details-marker { display: none; }
.field-help > summary::marker { content: ''; }
.field-help > summary span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 600; }
.field-help > summary:focus-visible { outline: 3px solid #216b58; outline-offset: 2px; }
.field-help > summary:hover { background: #e8efeb; }
.field-help-content { padding: 12px 16px; margin: 0 0 8px; border-left: 2px solid #b7cbc1; background: #edf2ef; color: #405c52; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.field-help-content p { margin: 0; }
.field-help-content p + p { margin-top: 8px; }
.help-anchor { position: relative; min-width: 0; min-height: 44px; }
.help-anchor > :first-child { padding-right: 48px; }
.help-anchor > .field-help > summary { position: absolute; top: 0; right: 0; }
.help-anchor > .field-help-content { width: 100%; }
.document-image-viewer { padding: 0; border: 0; border-radius: 12px; width: min(960px, 100%); max-width: 100%; max-height: 100dvh; background: #f5f7f5; color: #183c34; }
.document-image-viewer::backdrop { background: rgb(0 0 0 / 65%); }
.document-image-viewer header { position: sticky; top: 0; padding: 12px 16px; background: #fff; border-bottom: 1px solid #d3dfda; z-index: 1; }
.document-image-content { padding: 16px; }
.document-image-content h2 { overflow-wrap: anywhere; }
.document-image-content img { display: block; max-width: 100%; max-height: 65dvh; object-fit: contain; margin: 16px auto; }
.document-image-content img[hidden] { display: none; }
.document-pdf-canvas { display: block; width: 100%; height: auto; background: #fff; }
.document-pdf-canvas[hidden], .document-pdf-controls[hidden] { display: none; }
.document-pdf-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
@media (max-width: 600px) { .document-image-viewer { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } }
/* Ownership confirmation must remain readable on narrow screens. */
.handover-card { max-width: 44rem; margin-inline: auto; overflow-wrap: anywhere; }
.handover-card input { box-sizing: border-box; max-width: 100%; min-width: 0; }
.handover-card button { min-height: 44px; white-space: normal; }