/* Affairs Office console on the shared St. Maria theme (theme.css). Class names are driven by affairs.js. */
main { max-width: 1180px; margin: 0 auto; padding: 0 18px 30px; }

.card { position: relative; background: var(--paper); color: var(--ink); padding: 26px 28px; margin-bottom: 26px; border-top: 6px solid var(--red);
  box-shadow: 3px 4px 0 rgba(0,0,0,.2), 0 18px 28px -14px rgba(0,0,0,.6); }
.card::before { content: ""; position: absolute; top: -14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E8888F, var(--red) 60%, var(--red-deep)); box-shadow: 1px 3px 3px rgba(0,0,0,.35); }
.narrow { max-width: 460px; margin: 40px auto; transform: rotate(-.6deg);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(36,48,75,.07) 27px 28px); }
#entry-message { color: var(--muted); }
#login-form button { margin-top: 22px; width: 100%; height: 44px; }
#reload-entry { margin-top: 12px; }

/* who is signed in: a name tag */
.identity-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; margin: 0 0 26px;
  background: var(--gold-soft); color: var(--brown); box-shadow: 2px 3px 0 rgba(0,0,0,.25); transform: rotate(-.3deg); max-width: 640px; }
.identity-bar p { margin: 0; min-width: 0; }
.identity-bar strong { margin-right: 12px; font-family: var(--zh); font-size: 16px; color: var(--red-deep); }
.identity-bar #account-email { color: var(--brown); opacity: .75; overflow-wrap: anywhere; font-size: 13px; }

/* office mailbox: a stamped envelope strip */
.mailbox-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border-top-color: var(--green);
  background: var(--paper-2) repeating-linear-gradient(-45deg, transparent 0 12px, rgba(156,36,52,.06) 12px 18px, transparent 18px 24px, rgba(36,48,75,.06) 24px 30px); }
.mailbox-card::before { display: none; }
.mailbox-card h2 { font-size: 17px; margin-bottom: 2px; }
.mailbox-card p { margin: 0 0 2px; overflow-wrap: anywhere; }
.mailbox-card #mailbox-address { font-family: var(--type); font-variation-settings: "wdth" 75; color: var(--red); }
.mailbox-card button { flex-shrink: 0; margin-left: 6px; }

/* compose + preview */
.workspace-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: start; }
.workspace-grid > .card { min-width: 0; }
.workspace-grid > .card:first-child { transform: rotate(-.4deg); background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(36,48,75,.06) 27px 28px); }
.section-heading { margin-bottom: 8px; }
.lead { margin: 0 0 20px; font-size: 13px; }
.offer-preview-card { border-top-color: var(--gold); }
.offer-preview-card h3 { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; margin: 14px 0 0; color: var(--red-deep); }
#preview-frame { display: block; width: 100%; height: 620px; border: 0; background: var(--cream); margin-top: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.preview-text { margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.preview-text #preview-body { padding-top: 12px; color: var(--ink); font-size: 13px; white-space: pre-wrap; line-height: 1.9; overflow-wrap: anywhere; }
#preview-status { color: var(--red); }
#offer-template, #template-editor-select { max-width: none; }
select { max-width: 180px; }
.advanced-settings { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 14px; }
.advanced-settings summary, summary { cursor: pointer; }
.advanced-settings summary { font-size: 13px; color: var(--brown); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* issued offer: the ticket stub */
.result-card { border-top-color: var(--green); background: var(--paper-2); }
.result-card h2 { color: var(--red-deep); }
.result-card > .copy-field { max-width: 720px; }
.copy-field { display: flex; align-items: stretch; gap: 8px; }
.copy-field input { font-family: var(--type); font-variation-settings: "wdth" 75; letter-spacing: .04em; }
.copy-field button { flex-shrink: 0; }
#result-code { font-size: 17px; color: var(--red-deep); }
.result-card .delivery-note { font-size: 13px; padding: 12px 14px; background: var(--gold-soft); white-space: pre-wrap; margin: 22px 0 12px; overflow-wrap: anywhere; }
.result-card .delivery-note:empty { display: none; }

/* records ledger */
.records { border-top-color: var(--navy); }
.section-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 10px; }
.section-row h2 { margin-bottom: 0; }
.section-row button { flex-shrink: 0; }
.record-list { margin-top: 12px; }
.record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; padding: 16px 4px; border-top: 1px dashed var(--line); }
.record:nth-child(odd) { background: rgba(243,231,210,.45); }
.record-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; margin: 0 0 6px; color: var(--ink); }
.record-meta { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; margin: 0 0 4px; }
.record-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.record-actions { display: flex; align-items: center; gap: 8px; }
.record-actions button { font-size: 12.5px; padding: 6px 12px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.pagination button { font-size: 12.5px; padding: 6px 12px; }

/* admin drawers */
.management-panel { border-top-color: var(--brown); }
.management-panel::before { display: none; }
.management-panel > summary { font-family: var(--zh); font-weight: 900; font-size: 19px; color: var(--green-deep); list-style: none; display: flex; align-items: center; gap: 8px; }
.management-panel > summary::-webkit-details-marker { display: none; }
.management-panel > summary::before { content: "▸"; color: var(--red); font-size: 14px; transition: transform .15s; }
.management-panel[open] > summary::before { transform: rotate(90deg); }
.management-panel[open] > summary { margin-bottom: 16px; }
.management-panel .section-row h2 { display: none; }
.management-panel code { font-family: var(--type); font-variation-settings: "wdth" 75; font-size: 12px; background: var(--gold-soft); padding: 1px 5px; }
.management-panel #template-fields { max-width: 780px; }
textarea { resize: vertical; line-height: 1.8; background-image: repeating-linear-gradient(0deg, transparent 0 25px, rgba(36,48,75,.07) 25px 26px); background-attachment: local; }
.reviewer-form { max-width: 560px; }
#template-status[data-kind="error"] { color: var(--red); }

@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: 1fr; gap: 0; }
  .workspace-grid > .card:first-child { transform: none; }
}
@media (max-width: 640px) {
  main { padding: 0 12px 24px; }
  .card { padding: 22px 18px; }
  .identity-bar { flex-wrap: wrap; }
  .identity-bar #account-email { display: block; margin-top: 2px; }
  .section-row { flex-wrap: wrap; }
  .record { grid-template-columns: minmax(0, 1fr); }
  .record-actions { justify-content: flex-end; flex-wrap: wrap; }
  .actions > button { flex: 1 1 100%; }
  .pagination { justify-content: space-between; gap: 8px; }
  #preview-frame { height: 520px; }
}