@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-thai-400.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/noto-sans-thai-500.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-sans-thai-600.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-sans-thai-700.ttf") format("truetype"); }
@font-face { font-family: "Noto Serif Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/noto-serif-thai-500.ttf") format("truetype"); }
@font-face { font-family: "Noto Serif Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/noto-serif-thai-600.ttf") format("truetype"); }
@font-face { font-family: "Noto Serif Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/noto-serif-thai-700.ttf") format("truetype"); }
/* Songboon shared interface. Local assets keep every browser and LIFF view independent of Vite. */
:root {
    --sb-cream: #faf7f0;
    --sb-surface: #fffdfa;
    --sb-ink: #6e4b24;
    --sb-muted: #746b60;
    --sb-gold: #996520;
    --sb-gold-deep: #795019;
    --sb-gold-light: #f5ecd9;
    --sb-line: #e9e1d4;
    --sb-green: #416655;
    --sb-shadow: 0 5px 22px rgb(67 47 19 / 4%);
    --bs-body-color: var(--sb-ink);
    --bs-body-bg: var(--sb-cream);
    --bs-secondary-color: var(--sb-muted);
    --bs-border-color: var(--sb-line);
    --bs-primary: var(--sb-gold);
    --bs-primary-rgb: 153, 101, 32;
    --bs-link-color-rgb: 130, 83, 23;
    --bs-link-hover-color-rgb: 99, 60, 15;
    --bs-border-radius: .85rem;
    --bs-border-radius-lg: 1.1rem;
    --bs-font-sans-serif: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 9rem; }
body { margin: 0; background: var(--sb-cream); color: var(--sb-ink); font-family: var(--bs-font-sans-serif); font-size: 1rem; line-height: 1.75; -webkit-font-smoothing: antialiased; }
::selection { color: var(--sb-ink); background: #ead5ae; }
a { color: #825317; text-underline-offset: .2em; }
a:hover { color: #633c0f; }
button, input, optgroup, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
img, svg { vertical-align: middle; }
img { max-width: 100%; }
.icon { width: 1.35rem; height: 1.35rem; flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #b37d2f; outline-offset: 4px; }
.skip-link { position: fixed; top: -8rem; left: 1rem; color: var(--sb-ink); background: white; border: 1px solid var(--sb-gold); border-radius: .65rem; padding: .75rem 1rem; z-index: 2000; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgb(255 253 250 / 97%); border-bottom: 1px solid var(--sb-line); }
.header-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 94px; padding-top: 1rem; padding-bottom: .9rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--sb-gold-deep); text-decoration: none; }
.brand:hover { color: #633f16; }
.brand-mark { display: block; width: 48px; height: 56px; object-fit: contain; flex-shrink: 0; }
.brand-wordmark { display: block; font-family: "Noto Serif Thai", Georgia, serif; font-size: 1.9rem; font-weight: 600; line-height: 1.3; letter-spacing: -.035em; }
.brand small { display: block; font-family: var(--bs-font-sans-serif); color: #806b4c; font-size: .57rem; font-weight: 500; letter-spacing: .24em; margin-top: .3rem; }
.account-chip { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; max-width: 240px; min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--sb-line); border-radius: 2rem; color: #65543c; background: #fffdf9; text-decoration: none; font-size: .85rem; }
.account-chip:hover { background: var(--sb-gold-light); border-color: #d7bf98; color: var(--sb-gold-deep); }
.account-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: #f4ecdd; color: #966b32; }
.account-chip-icon .icon { width: 17px; height: 17px; }
.account-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-badge { display: inline-block; padding: .35rem .75rem; border: 1px solid #e4d7bd; border-radius: 2rem; color: #795c32; background: #faf3e5; font-size: .78rem; line-height: 1.5; }
.primary-navigation { border-top: 1px solid #f0e9df; }
.navigation-items { display: flex; align-items: stretch; gap: 2rem; }
.navigation-link { position: relative; display: flex; align-items: center; gap: .55rem; min-height: 55px; color: var(--sb-muted); text-decoration: none; padding: .8rem .15rem; border-bottom: 2px solid transparent; font-size: .88rem; }
.navigation-link.active { color: var(--sb-gold-deep); border-bottom-color: #b18443; font-weight: 600; }
.navigation-link:hover { color: var(--sb-gold); }
.navigation-icon { display: inline-flex; align-items: center; justify-content: center; }
.navigation-icon .icon { width: 19px; height: 19px; }
.main-content { padding-top: 2.3rem; padding-bottom: 1rem; min-height: 61vh; }
.main-content > * { min-width: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--sb-ink); line-height: 1.5; font-weight: 600; overflow-wrap: break-word; }
h1 { letter-spacing: -.025em; }
h2, h3 { letter-spacing: -.015em; }
.page-title { font-size: clamp(1.65rem, 3.3vw, 2.25rem); font-weight: 600; line-height: 1.5; margin-bottom: .65rem; }
.page-intro { max-width: 52rem; color: var(--sb-muted); font-size: .95rem; margin-bottom: 1.9rem; }
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.8rem; }
.page-header .page-title { margin-bottom: .3rem; }
.breadcrumb-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; text-decoration: none; color: var(--sb-muted); font-size: .88rem; }
.serif-accent { font-family: "Noto Serif Thai", Georgia, serif; color: var(--sb-gold); }
.section-block { padding: 3rem 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading h2 { font-size: 1.5rem; margin: 0; }
.section-note { color: var(--sb-muted); font-size: .8rem; }
.section-title { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin-bottom: 1.2rem; }
.card, .surface-card { --bs-card-bg: var(--sb-surface); --bs-card-border-color: var(--sb-line); --bs-card-border-radius: 1.1rem; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 1.1rem; box-shadow: var(--sb-shadow); min-width: 0; }
/* Standalone surfaces need an inset; Bootstrap cards use their existing body or utility padding. */
.surface-card:where(:not(.card)) { padding: clamp(1rem, 2vw, 1.5rem); }
.card.border-0 { border: 1px solid var(--sb-line) !important; }
.card.shadow-sm { box-shadow: var(--sb-shadow) !important; }
.card.p-3 { padding: 1.35rem !important; }
.card-header { padding: 1rem 1.35rem; color: #6c512d; background: #fcf8ef; border-bottom-color: var(--sb-line); }
.card-body { padding: 1.35rem; }
a.card { color: var(--sb-ink); transition: border-color .18s ease, box-shadow .18s ease; }
a.card:hover { border-color: #cfb389; box-shadow: 0 6px 24px rgb(67 47 19 / 7%); }
.card > :last-child { margin-bottom: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .65rem 1.15rem; border-radius: .75rem; font-size: .9rem; font-weight: 500; line-height: 1.65; white-space: normal; text-align: center; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #966326; --bs-btn-border-color: #966326; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7c501b; --bs-btn-hover-border-color: #7c501b; --bs-btn-active-bg: #6c4416; --bs-btn-active-border-color: #6c4416; --bs-btn-disabled-bg: #b1a38f; --bs-btn-disabled-border-color: #b1a38f; --bs-btn-disabled-opacity: 1; --bs-btn-focus-shadow-rgb: 153, 101, 32; box-shadow: 0 3px 8px rgb(122 81 27 / 10%); }
.btn-outline-primary { --bs-btn-color: #80531f; --bs-btn-border-color: #c9ab7f; --bs-btn-hover-color: #70491a; --bs-btn-hover-bg: #f6ecdb; --bs-btn-hover-border-color: #b88c51; --bs-btn-active-color: #70491a; --bs-btn-active-bg: #eee0c8; --bs-btn-active-border-color: #a67c42; --bs-btn-disabled-color: #9b8c78; --bs-btn-disabled-border-color: #d8cdbd; }
.btn-outline-secondary { --bs-btn-color: #665c4e; --bs-btn-border-color: #d7cdbc; --bs-btn-hover-color: #3b3328; --bs-btn-hover-bg: #f1eadf; --bs-btn-hover-border-color: #b9a88e; --bs-btn-active-color: #3b3328; --bs-btn-active-bg: #e6ddce; --bs-btn-active-border-color: #b9a88e; }
.btn-secondary { --bs-btn-bg: #726754; --bs-btn-border-color: #726754; --bs-btn-hover-bg: #5f5545; --bs-btn-hover-border-color: #5f5545; }
.btn-success { --bs-btn-bg: #416655; --bs-btn-border-color: #416655; --bs-btn-hover-bg: #315140; --bs-btn-hover-border-color: #315140; }
.btn-outline-danger { --bs-btn-color: #a0443c; --bs-btn-border-color: #d1aaa1; --bs-btn-hover-bg: #963e37; --bs-btn-hover-border-color: #963e37; }
.btn-sm { min-height: 44px; padding: .45rem .85rem; font-size: .82rem; }
.btn-lg { min-height: 52px; padding: .85rem 1.45rem; font-size: 1rem; }
.btn .icon { width: 1.1rem; height: 1.1rem; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }
.btn-link { text-decoration: underline; text-underline-offset: .2em; }
.action-bar { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sb-line); }
/* Save and edit actions occupy a full-width row in forms and cards. */
.btn.btn-save,
.btn.btn-edit,
.action-bar > .btn.btn-save,
.action-bar > .btn.btn-edit,
.form-actions > .btn.btn-save,
.form-actions > .btn.btn-edit,
.inline-card-editor .form-actions > .btn.btn-save,
.inline-card-editor .form-actions > .btn.btn-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    align-self: stretch;
    white-space: normal;
}
form { min-width: 0; }
.form-label, label:not(.form-check-label):not(.form-check) { display: block; color: #514634; font-size: .9rem; font-weight: 500; margin-bottom: .45rem; }
.form-control, .form-select { min-height: 48px; max-width: 100%; padding: .7rem .85rem; border-color: #9c8e76; border-radius: .7rem; background-color: #fffefb; color: var(--sb-ink); font-size: 1rem; line-height: 1.65; }
.form-select { padding-right: 2.4rem; }
.form-control::placeholder { color: #7c7265; opacity: 1; }
.form-control:focus, .form-select:focus { color: var(--sb-ink); background-color: white; border-color: #b58a4e; box-shadow: 0 0 0 .22rem rgb(164 118 52 / 13%); }
.form-control:disabled, .form-select:disabled { color: #7a7063; background-color: #f0ece5; opacity: 1; }
textarea.form-control { min-height: 110px; resize: vertical; }
input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"] { min-width: 0; }
input[type="file"].form-control { padding: .5rem .65rem; font-size: .9rem; }
.form-control[type="file"]::file-selector-button { margin: -.5rem .75rem -.5rem -.65rem; padding: .7rem .8rem; color: #6d532b; background: #f5eddf; }
.form-text, .invalid-feedback, .valid-feedback { font-size: .82rem; line-height: 1.7; }
.form-text { color: var(--sb-muted); margin-top: .45rem; }
.invalid-feedback { color: #a04138; }
.form-check { min-height: 44px; padding-left: 1.9rem; }
.form-check-input { width: 1.2rem; height: 1.2rem; margin-top: .28rem; border-color: #9c8e76; border-radius: .3rem; cursor: pointer; }
.form-check .form-check-input { margin-left: -1.9rem; }
.form-check-input:checked { background-color: #966326; border-color: #966326; }
.form-check-input:focus { border-color: #b58a4e; box-shadow: 0 0 0 .22rem rgb(164 118 52 / 13%); }
.form-check-label { display: inline-block; cursor: pointer; padding-bottom: .6rem; color: #625749; font-size: .9rem; }
.form-switch { padding-left: 3.25rem; }
.form-switch .form-check-input { width: 2.5rem; height: 1.35rem; margin-left: -3.25rem; }
fieldset { min-width: 0; }
fieldset.border { border-color: var(--sb-line) !important; border-radius: .9rem !important; background: #fcf9f3; }
legend { color: #775930; font-weight: 600; }
.form-section { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--sb-line); }
.form-section:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; }
.input-group { min-width: 0; }
.input-group-text { color: #6b5b45; background: #f6f0e4; border-color: #9c8e76; font-size: .9rem; }
.alert { --bs-alert-border-radius: .85rem; padding: 1rem 1.2rem; font-size: .87rem; line-height: 1.8; overflow-wrap: anywhere; }
.alert-info { --bs-alert-color: #4b625e; --bs-alert-bg: #eef3f0; --bs-alert-border-color: #d6e2da; }
.alert-warning { --bs-alert-color: #775b2e; --bs-alert-bg: #faf3e4; --bs-alert-border-color: #e9d7b4; }
.alert-success { --bs-alert-color: #355c46; --bs-alert-bg: #edf4ed; --bs-alert-border-color: #d2e0d1; }
.alert-danger { --bs-alert-color: #8b4038; --bs-alert-bg: #fcf0ec; --bs-alert-border-color: #ebccc3; }
.alert-secondary { --bs-alert-color: #645b4e; --bs-alert-bg: #f3efe7; --bs-alert-border-color: #e2d9cb; }
.feedback-message { display: flex; align-items: flex-start; gap: .85rem; }
.feedback-message > div { min-width: 0; }
.feedback-symbol { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-weight: 600; font-size: .85rem; }
.loading-state { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--sb-line); padding: 1rem; margin-bottom: 1rem; background: var(--sb-surface); border-radius: .85rem; color: var(--sb-muted); font-size: .9rem; }
.badge { padding: .42em .7em; border-radius: .45rem; font-weight: 500; font-size: .75em; line-height: 1.5; white-space: normal; }
.text-bg-primary, .bg-primary { background-color: #916022 !important; }
.text-bg-success, .bg-success { background-color: #416655 !important; }
.text-bg-warning { color: #604719 !important; background-color: #efe0bb !important; }
.text-bg-secondary { background-color: #756a59 !important; }
.text-secondary, .text-muted { color: var(--sb-muted) !important; }
.text-primary { color: var(--sb-gold) !important; }
.text-success { color: #416655 !important; }
.text-danger { color: #a24236 !important; }
small, .small { line-height: 1.75; }
dt { color: #685a46; font-weight: 500; }
dd { color: var(--sb-ink); overflow-wrap: anywhere; }
dl.row dt, dl.row dd { padding-top: .35rem; padding-bottom: .35rem; margin-bottom: 0; }
dl.row dt { color: #776b58; }
dl.row > :nth-last-child(-n+2) { margin-bottom: 0; }
.table-responsive { max-width: 100%; border: 1px solid var(--sb-line); border-radius: .85rem; background: var(--sb-surface); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #c6b394 #f7f2e9; }
.table { --bs-table-color: var(--sb-ink); --bs-table-bg: transparent; --bs-table-border-color: #ece4d7; --bs-table-hover-bg: #faf4e9; margin-bottom: 0; font-size: .88rem; line-height: 1.7; }
.table > :not(caption) > * > * { padding: .9rem 1rem; }
.table th { color: #735935; background: #f6efe2; font-weight: 500; white-space: nowrap; }
.table td { vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table caption { color: var(--sb-muted); font-size: .82rem; padding: .7rem 1rem; }
.pagination { --bs-pagination-padding-x: .85rem; --bs-pagination-padding-y: .6rem; --bs-pagination-color: #80531f; --bs-pagination-bg: #fffdf9; --bs-pagination-border-color: #e1d5c1; --bs-pagination-hover-color: #70491a; --bs-pagination-hover-bg: #f6ecdb; --bs-pagination-hover-border-color: #d5bd98; --bs-pagination-focus-color: #70491a; --bs-pagination-focus-bg: #f6ecdb; --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgb(164 118 52 / 13%); --bs-pagination-active-bg: #916022; --bs-pagination-active-border-color: #916022; --bs-pagination-disabled-bg: #f5f0e7; --bs-pagination-disabled-color: #8b8071; --bs-pagination-disabled-border-color: #e1d5c1; flex-wrap: wrap; gap: .3rem; }
.pagination .page-link { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border-radius: .6rem !important; }
details > summary { min-height: 44px; padding-top: .35rem; padding-bottom: .35rem; color: #7a5628; cursor: pointer; line-height: 1.7; }
details[open] > summary { margin-bottom: 1rem !important; }
.demo-account-group { padding: 0; }
.demo-account-group > summary { padding: 1rem; list-style: none; border-radius: inherit; }
.demo-account-group > summary::-webkit-details-marker { display: none; }
.demo-account-group > summary:hover { background: var(--sb-gold-light); }
.demo-account-group > summary:focus-visible { outline: 2px solid var(--sb-gold-deep); outline-offset: 3px; }
.demo-account-group[open] > summary { margin-bottom: 0 !important; }
.demo-account-group > summary .flex-grow-1 { min-width: 0; overflow-wrap: anywhere; }
.demo-account-group > summary .badge, .demo-account-group-chevron { flex-shrink: 0; }
.demo-account-group[open] .demo-account-group-chevron { transform: rotate(180deg); }
.demo-account-group-body { padding: 0 1rem 1rem; }
.ui-help { margin-block: .75rem 1rem; border: 1px solid var(--sb-line); border-radius: .75rem; background: #fcf9f3; font-size: .85rem; color: var(--sb-muted); overflow-wrap: anywhere; }
.ui-help > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .65rem .9rem; margin: 0 !important; color: #6d5535; list-style: none; font-weight: 500; }
.ui-help > summary::-webkit-details-marker { display: none; }
.ui-help > summary > span { min-width: 0; flex: 1; }
.ui-help > summary .icon { width: 1.1rem; height: 1.1rem; }
.ui-help > summary:focus-visible { outline-offset: -3px; border-radius: .75rem; }
.ui-help .ui-help-chevron { width: .9rem; height: .9rem; }
.ui-help[open] .ui-help-chevron { transform: rotate(180deg); }
.ui-help-body { padding: .2rem .9rem .9rem; line-height: 1.8; }
.ui-help-body > :last-child { margin-bottom: 0; }
.ui-help-body > :first-child { margin-top: 0; }
.breadcrumb-link > .icon { width: 1.1rem; height: 1.1rem; }
.section-title > .icon { color: var(--sb-gold); width: 1.2rem; height: 1.2rem; }
.page-title > .icon { color: var(--sb-gold); width: 1.5rem; height: 1.5rem; vertical-align: -.1em; }
.badge > .icon, .form-text > .icon { width: 1em; height: 1em; vertical-align: -.1em; }
.workspace-link > span:first-child { display: flex; align-items: center; gap: .6rem; }
.btn > .icon { align-self: center; }
.ui-help + .ui-help { margin-top: -.25rem; }
.list-group { --bs-list-group-bg: var(--sb-surface); --bs-list-group-border-color: var(--sb-line); --bs-list-group-action-hover-bg: #f8f1e5; --bs-list-group-color: var(--sb-ink); }
.list-group-item { padding: .95rem 1.1rem; }
.empty-state { padding: 3.5rem 1.5rem; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 1.25rem; box-shadow: var(--sb-shadow); }
.empty-icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border: 1px solid #e4d5bd; border-radius: 1.3rem; color: #a17b42; background: #f8f0e2; transform: rotate(-5deg); }
.empty-icon .icon { width: 1.8rem; height: 1.8rem; transform: rotate(5deg); }
.empty-state p { max-width: 35rem; font-size: .9rem; }
.empty-state-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .65rem; }
.metric-card { background: var(--sb-surface); border: 1px solid var(--sb-line); padding: 1.3rem; border-radius: 1rem; box-shadow: var(--sb-shadow); }
.metric-card .metric-label { color: var(--sb-muted); font-size: .82rem; }
.metric-card .metric-value { display: block; color: #805824; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.5; overflow-wrap: anywhere; }
.quick-link { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; color: var(--sb-ink); text-decoration: none; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 1rem; }
.quick-link:hover { color: var(--sb-gold-deep); border-color: #ccb38e; background: #fffaf0; }
.quick-link .icon { color: #a1783c; }
.quick-link-copy { min-width: 0; }
.quick-link-copy strong { display: block; font-size: .95rem; font-weight: 500; }
.quick-link-copy small { display: block; color: var(--sb-muted); font-size: .78rem; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 3.5rem; padding-top: 1.5rem; padding-bottom: 2rem; color: #7e705d; border-top: 1px solid var(--sb-line); font-size: .75rem; }
.footer-brand { display: flex; align-items: center; gap: .6rem; }
.footer-brand img { object-fit: contain; }
.footer-brand strong { color: #8b642f; font-weight: 500; }
/* Existing page primitives remain available to authenticated and public views. */
.hero { border: 1px solid #e9dbc3; border-radius: 1.5rem; overflow: hidden; background: #f6efdf; }
.hero-copy { padding: 3.5rem; }
.hero h1 { font-size: clamp(2.4rem, 4.5vw, 4rem); line-height: 1.45; letter-spacing: -.035em; margin-bottom: 1rem; }
.hero-description { max-width: 37rem; color: #7a6a54; font-size: 1rem; margin-bottom: 1.7rem; }
.hero-note { color: #81715b; font-size: .78rem; margin: 1rem 0 0; }
.hero-art { padding: 1.5rem 2rem 1.5rem 0; text-align: center; }
.envelope-art { width: 100%; max-width: 440px; }
.art-caption { display: block; margin-top: -.5rem; color: #8b7556; font-size: .85rem; }
.intro-strip { margin-top: 2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--sb-line); }
.intro-strip > div { display: flex; align-items: flex-start; gap: .8rem; padding: .5rem 1rem; }
.intro-strip > div + div { border-left: 1px solid var(--sb-line); }
.step-number { color: #89632f; font-size: .73rem; padding-top: .2rem; }
.intro-strip h2 { font-size: .95rem; margin-bottom: .2rem; }
.intro-strip p { color: var(--sb-muted); font-size: .8rem; margin: 0; }
.event-card { height: 100%; padding: 1.5rem; background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 1rem; box-shadow: var(--sb-shadow); }
.event-number { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: 1rem; color: #96713b; border-radius: .7rem; background: #f6eddf; font-size: .75rem; }
.event-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.event-card p { color: var(--sb-muted); font-size: .86rem; margin: 0; }
.merit-tag { display: inline-block; color: #52624b; background: #f0f2e7; font-size: .72rem; padding: .2rem .55rem; border-radius: .4rem; margin-top: .9rem; }
.trust-panel { margin: 0; padding: 2.5rem; background: #f3ecdd; border: 1px solid #e6d9c0; border-radius: 1.2rem; }
.trust-panel h2 { font-size: 1.75rem; margin-bottom: 0; }
.trust-list { padding-left: 1.2rem; font-size: .88rem; }
.trust-list li { padding: .25rem 0; }
.print-sheet { background: white; border: 1px solid var(--sb-line); padding: 2rem; max-width: 210mm; }
@media (min-width: 768px) {
    .liff-shell .main-content { max-width: 800px; }
    .liff-shell .hero-copy { padding: 2rem; width: 100%; }
    .liff-shell .hero-art { display: none; }
}
@media (min-width: 992px) {
    .card.p-md-4 { padding: 1.8rem !important; }
}
@media (max-width: 991.98px) {
    .header-content { min-height: 86px; }
    .hero-copy { padding: 2.5rem; }
    .hero-art { padding: 0 1.5rem 1.5rem; }
    .envelope-art { max-width: 320px; }
}
@media (max-width: 767.98px) {
    html { scroll-padding-top: 6.5rem; }
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    body.invitation-landing-shell { padding-bottom: env(safe-area-inset-bottom); }
    .container { padding-left: 1.1rem; padding-right: 1.1rem; }
    .header-content { min-height: 78px; padding-top: .65rem; padding-bottom: .65rem; gap: .75rem; }
    .brand { gap: .55rem; }
    .brand-mark { width: 38px; height: 45px; }
    .brand-wordmark { font-size: 1.6rem; }
    .brand small { font-size: .48rem; letter-spacing: .2em; margin-top: .2rem; }
    .account-chip { max-width: 145px; gap: .4rem; padding: .3rem .6rem; font-size: .76rem; min-height: 44px; }
    .account-chip-icon { width: 27px; height: 27px; }
    .account-chip > .icon { width: 18px; height: 18px; }
    .primary-navigation { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding-bottom: env(safe-area-inset-bottom); background: #fffdf9; border-top: 1px solid #e5d8c2; box-shadow: 0 -4px 24px rgb(78 55 22 / 5%); }
    .navigation-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0 .3rem; }
    .navigation-link { justify-content: center; flex-direction: column; min-height: 72px; gap: .2rem; padding: .55rem .1rem .45rem; border: 0; font-size: .68rem; line-height: 1.6; }
    .navigation-icon { width: 40px; height: 28px; border-radius: .7rem; }
    .navigation-icon .icon { width: 21px; height: 21px; }
    .navigation-link.active { color: #8c5c22; background: transparent; }
    .navigation-link.active .navigation-icon { background: #f4ead7; }
    .navigation-link.active::before { position: absolute; top: 0; left: calc(50% - 12px); width: 24px; height: 2px; background: #b38746; border-radius: 0 0 3px 3px; content: ""; }
    .main-content { padding-top: 1.4rem; }
    .page-title { font-size: 1.65rem; }
    .page-intro { font-size: .88rem; margin-bottom: 1.4rem; }
    .page-header { gap: .75rem; margin-bottom: 1.4rem; }
    .page-header > div { min-width: 0; }
    .card, .surface-card { border-radius: 1rem; }
    .card.p-3, .card.p-md-4 { padding: 1.1rem !important; }
    .card-body { padding: 1.1rem; }
    .form-label, label:not(.form-check-label):not(.form-check) { font-size: .88rem; }
    .form-control, .form-select { font-size: 16px; }
    .alert { padding: .9rem 1rem; font-size: .84rem; }
    .btn { padding: .6rem .95rem; font-size: .87rem; }
    .action-bar > .btn { flex: 1 1 150px; }
    .mobile-stack { display: flex; flex-direction: column; align-items: stretch !important; }
    .mobile-stack > .btn { width: 100%; }
    .action-bar.mobile-stack > .btn { flex: 0 0 auto; }
    .table { font-size: .82rem; }
    .table > :not(caption) > * > * { padding: .8rem .75rem; }
    .table-responsive .table { min-width: 460px; }
    .pagination { --bs-pagination-padding-x: .65rem; font-size: .85rem; }
    .hero { border-radius: 1.1rem; }
    .hero-copy { padding: 2rem 1.4rem 1rem; }
    .hero h1 { font-size: 2.6rem; }
    .hero-description { font-size: .92rem; }
    .hero-note { font-size: .75rem; }
    .hero-art { padding: 0 1.5rem 1.5rem; }
    .envelope-art { max-width: 260px; }
    .art-caption { font-size: .78rem; }
    .intro-strip { margin-top: .75rem; }
    .intro-strip > div { padding: .85rem .3rem; }
    .intro-strip > div + div { border-left: 0; border-top: 1px solid var(--sb-line); }
    .section-block { padding: 2rem 0; }
    .section-heading { display: block; }
    .section-heading h2 { font-size: 1.35rem; }
    .section-note { display: block; margin-top: .5rem; }
    .event-card { padding: 1.3rem; }
    .trust-panel { padding: 1.5rem; }
    .trust-panel h2 { font-size: 1.5rem; }
    .empty-state { padding: 2.6rem 1.15rem; }
    .empty-state h2 { font-size: 1.2rem; }
    .empty-state p { font-size: .86rem; }
    .site-footer { align-items: flex-start; flex-direction: column; gap: .5rem; padding-top: 1.2rem; padding-bottom: 1rem; margin-top: 2rem; font-size: .7rem; }
    .print-shell { padding-bottom: 0; }
}
@media (max-width: 359.98px) {
    .container { padding-left: .9rem; padding-right: .9rem; }
    .brand-wordmark { font-size: 1.4rem; }
    .brand-mark { width: 34px; height: 41px; }
    .account-chip { max-width: 125px; padding: .3rem .5rem; }
    .account-chip-icon { display: none; }
    .page-title { font-size: 1.5rem; }
    .navigation-link { font-size: .65rem; }
    .card.p-3, .card.p-md-4 { padding: 1rem !important; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@page { size: A4; margin: 15mm; }
@media print {
    html { scroll-padding-top: 0; }
    body { color: #000; background: white; padding: 0; font-size: 11pt; }
    .site-header, .site-footer, .skip-link, .no-print { display: none !important; }
    .main-content { padding-top: 0; padding-bottom: 0; min-height: 0; }
    .print-sheet { padding: 0; border: 0; box-shadow: none; }
    .card, .surface-card { box-shadow: none !important; }
    .table-responsive { overflow: visible; border: 0; border-radius: 0; }
    .table-responsive .table { min-width: 0; }
    .table { font-size: inherit; }
    .table th { color: #000; background: transparent; white-space: normal; }
    a { color: inherit; }
}
/* Event location and guided input use the same form language. */
.location-picker { padding: 1.25rem; border: 1px solid #e4d5bd; border-radius: 1rem; background: #fbf6ec; }
.location-picker .form-control { background-color: #fffefb; }
.form-step { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: .55rem; border: 1px solid #e0cca7; border-radius: .65rem; background: #f6ecd9; color: #956c30; font-size: .75rem; font-variant-numeric: tabular-nums; vertical-align: middle; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--sb-line); }
.location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.event-honorees { margin: 0 0 1.2rem; padding: 1rem; border: 1px solid var(--sb-line); border-radius: .85rem; background: #fcfaf5; }
.event-repeat-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.event-repeat-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0; color: var(--sb-gold-deep); font-size: .95rem; }
.event-honoree-rows { display: grid; gap: .6rem; }
.event-honoree-row { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) 44px; align-items: center; gap: .55rem; }
.event-honoree-row > .form-control { min-width: 0; min-height: 44px; }
.event-repeat-number { color: var(--sb-muted); text-align: center; font-size: .75rem; font-variant-numeric: tabular-nums; }
.event-repeat-error { grid-column: 2 / -1; }
.event-repeat-heading .guest-icon-action, .event-honoree-row .guest-icon-action, .event-location-card-heading .guest-icon-action { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.event-additional-locations { margin-top: 1rem; border: 1px solid var(--sb-line); border-radius: .9rem; }
.event-additional-locations > summary { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 50px; padding: .8rem 1rem; color: var(--sb-gold-deep); list-style: none; cursor: pointer; }
.event-additional-locations > summary::-webkit-details-marker { display: none; }
.event-additional-locations > summary > span { display: inline-flex; align-items: center; gap: .4rem; }
.event-additional-locations[open] > summary > .icon { transform: rotate(180deg); }
.event-additional-location-body { padding: 0 1rem 1rem; }
.event-location-add-heading { margin-bottom: .75rem; }
.event-location-add-heading > .btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: .8rem; }
.event-location-card { padding: 1rem; margin-bottom: .8rem; border: 1px solid var(--sb-line); border-radius: .85rem; background: #fffdf9; }
.event-location-card:last-child { margin-bottom: 0; }
.event-location-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.event-location-card-heading h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0; color: var(--sb-gold-deep); font-size: .9rem; }
.event-location-card .location-picker { margin-bottom: 0; padding: 1rem; }
.event-location-card .location-picker legend { font-size: .95rem; }
.event-honoree-summary { margin-bottom: 1.2rem; }
.event-honoree-summary h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; color: var(--sb-muted); font-size: .85rem; }
.event-honoree-summary ul { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.event-honoree-summary li { padding: .35rem .7rem; border: 1px solid var(--sb-line); border-radius: 999px; color: var(--sb-ink); background: var(--sb-surface); font-size: .85rem; overflow-wrap: anywhere; }
.event-extra-venue-list { display: grid; gap: .6rem; margin-top: .8rem; }
.event-extra-venue { min-width: 0; padding: .7rem .8rem; border: 1px solid var(--sb-line); border-radius: .7rem; }
.event-extra-venue > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.event-extra-venue > header > strong { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .85rem; overflow-wrap: anywhere; }
.event-extra-venue > header > strong > .icon { flex-shrink: 0; }
.event-extra-venue > p { margin: .4rem 0 0; color: var(--sb-muted); font-size: .8rem; white-space: pre-line; }
.event-additional-count { display: inline-block; flex-shrink: 0; padding: .1rem .35rem; border-radius: 999px; color: var(--sb-gold-deep); background: #f1e7d3; font-size: .65rem; font-variant-numeric: tabular-nums; }
.location-map-dialog { width: min(46rem, calc(100% - 1.5rem)); max-width: none; max-height: calc(100dvh - 1.5rem); margin: auto; padding: 1rem; overflow: auto; border: 1px solid #d8c8ab; border-radius: 1rem; color: var(--sb-ink); background: #fffdf9; box-shadow: 0 20px 75px rgb(31 25 17 / 25%); }
.location-map-dialog[open] { display: grid; gap: .75rem; }
.location-map-dialog::backdrop { background: rgb(29 24 18 / 50%); }
.location-map-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.location-map-heading > strong { color: var(--sb-gold-deep); font-size: 1rem; }
.location-map-tools { display: flex; gap: .4rem; }
.location-map-tools > .btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.25rem; }
.location-map-stage { position: relative; height: clamp(12rem, 48dvh, 27rem); min-width: 0; overflow: hidden; isolation: isolate; border-radius: .75rem; background: #e5e5df; box-shadow: inset 0 0 0 1px rgb(73 64 49 / 15%); touch-action: none; cursor: grab; }
.location-map-stage:active { cursor: grabbing; }
.location-map-stage:focus-visible { outline: 3px solid var(--sb-gold); outline-offset: 2px; }
.location-map-tiles { position: absolute; inset: 0; pointer-events: none; }
.location-map-tile { position: absolute; display: block; width: 256px; height: 256px; max-width: none; user-select: none; }
.location-map-marker { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: .5rem; background: transparent; font-family: system-ui, sans-serif; font-size: 2rem; line-height: 1; transform: translate(-50%, -100%); cursor: grab; touch-action: none; }
.location-map-marker:focus-visible { outline: 3px solid var(--sb-gold-deep); outline-offset: 2px; background: rgb(255 255 255 / 65%); }
.location-map-attribution { position: absolute; z-index: 3; right: 0; bottom: 0; padding: .2rem .4rem; color: #3f4e48; background: rgb(255 255 255 / 92%); font-size: .65rem; line-height: 1.5; }
.location-map-readout { margin: 0; color: var(--sb-ink); font-size: .85rem; font-variant-numeric: tabular-nums; }
.location-map-status { min-height: 1.4em; margin: 0; color: var(--sb-muted); font-size: .75rem; }
.location-map-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.location-map-actions > .btn { min-height: 44px; }
.google-location-map-stage, .google-location-map-stage:active { touch-action: auto; cursor: default; }
.google-location-map-canvas { position: absolute; inset: 0; }
.google-location-map-canvas img { max-width: none; }
.google-location-map-pin { position: absolute; z-index: 2; top: 50%; left: 50%; font-family: system-ui, sans-serif; font-size: 2.25rem; line-height: 1; transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 2px 3px rgb(44 28 12 / 30%)); }
.google-location-map-search { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; min-width: 0; }
.google-location-map-search > .btn { min-height: 44px; }
.google-location-map-results { position: absolute; z-index: 5; top: calc(100% + .35rem); right: 0; left: 0; max-height: min(18rem, 40dvh); overflow: auto; padding: .25rem; border: 1px solid var(--sb-line); border-radius: .7rem; background: var(--sb-surface); box-shadow: 0 8px 28px rgb(67 47 19 / 18%); }
.google-location-map-result { display: block; width: 100%; min-height: 44px; padding: .65rem .75rem; border: 0; border-radius: .45rem; color: var(--sb-ink); background: transparent; font: inherit; font-size: .9rem; line-height: 1.6; text-align: start; overflow-wrap: anywhere; }
.google-location-map-result:hover, .google-location-map-result:focus-visible { color: var(--sb-ink); background: var(--sb-gold-light); }
.google-location-map-result:focus-visible { outline-offset: -2px; }
.google-location-map-dialog .location-map-actions { flex-wrap: wrap; }
@media (max-width: 575.98px) { .google-location-map-dialog .location-map-actions > .btn { flex: 1 1 auto; } }
@media (max-width: 767.98px) {
    .location-picker { padding: 1rem; }
    .form-actions > .btn { flex: 1 1 150px; }
    .location-actions > .btn { flex: 1 1 140px; }
    .event-honorees, .event-location-card { padding: .8rem; }
    .event-additional-location-body { padding-inline: .7rem; }
    .event-honoree-row { grid-template-columns: 1.2rem minmax(0, 1fr) 44px; gap: .35rem; }
    .location-map-dialog { padding: .75rem; }
    .location-map-actions > .btn { flex: 1; }
}
@media (max-width: 575.98px) {
    .location-actions.flex-column > .btn { flex: 0 0 auto; }
}
@media screen and (max-width: 575.98px) {
    .financial-totals > dt, .financial-totals > dd { width: 100%; }
    .financial-totals > dd { text-align: left !important; font-variant-numeric: tabular-nums; margin-bottom: 1.2rem; }
}

/* Brand-led screens; all fonts and graphics are served locally. */
header.page-header { display: block; }
header.page-header-with-back { margin: 0 0 1.25rem; }
.page-header-main { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.page-header-title { flex: 1 1 auto; min-width: 0; }
.page-header-title > .page-title { margin: 0; overflow-wrap: anywhere; }
.page-header-with-back > .page-intro { margin-top: .4rem; }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin-top: .75rem; }
.page-header-actions > .ui-help { display: flex; margin: 0; }
.page-back { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--sb-line); border-radius: .8rem; background: var(--sb-surface); color: var(--sb-gold-deep); font-size: .85rem; line-height: 1.5; white-space: nowrap; text-decoration: none; }
.page-back > .icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.page-back:hover { color: var(--sb-gold-deep); background: var(--sb-gold-light); }
@media (max-width: 575.98px) {
    .page-back { padding: .5rem .65rem; }
}
@media print { .page-back { display: none !important; } }
.hero { background: #fcf9f2; box-shadow: 0 18px 55px #51361406; }
.hero-copy { padding: 3.6rem 3.4rem; }
.hero h1 { font-family: "Noto Serif Thai", Georgia, serif; font-weight: 600; font-size: clamp(2.6rem, 4.6vw, 4.1rem); line-height: 1.6; letter-spacing: -.04em; }
.hero-description { font-size: 1.02rem; line-height: 1.9; }
.hero-art { padding: 1.8rem 2.1rem 1.8rem 0; }
.brand-art { background: #fff; border: 1px solid #eee3d1; border-radius: 1.3rem; overflow: hidden; box-shadow: 0 14px 40px #714c1710; }
.brand-art-image { display: block; width: 100%; height: auto; max-width: 440px; margin: 0 auto; }
.art-caption { display: block; font-size: .75rem; color: #7b694b; margin: 1rem 0 0; }
.hero-note { display: flex; align-items: flex-start; gap: .45rem; margin-top: 1.3rem; font-size: .78rem; }
.hero-note .icon { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.home-actions { align-items: center; }
.home-actions .btn-lg { padding: .8rem 1.4rem; }
.event-type-card { position: relative; overflow: hidden; transition: border-color .2s, transform .2s; }
.event-type-card:hover { border-color: #c8a76a; transform: translateY(-2px); }
.event-type-card h3 { font-family: "Noto Serif Thai", Georgia, serif; font-weight: 600; }
.trust-panel { background: #f1eade; }
.trust-panel h2 { font-family: "Noto Serif Thai", Georgia, serif; font-weight: 600; line-height: 1.8; }
.btn-line { background: #087b37; border-color: #087b37; color: #fff; min-height: 50px; }
.btn-line:hover, .btn-line:focus { background: #06642c; border-color: #06642c; color: #fff; }
.btn-line:disabled { background: #e4e9e2; border-color: #d3dbd0; color: #4c594a; opacity: 1; }
.account-login { text-align: center; max-width: 600px; margin: 0 auto; padding: 2.8rem 2rem; }
.account-login .btn { max-width: 360px; width: 100%; margin-top: .8rem; }
.login-brand { display: block; margin: 0 auto; }
.login-privacy { margin: 1.7rem 0 0; border-top: 1px solid #ece2d2; padding-top: 1.5rem; font-size: .79rem; color: #7b6c56; }
.login-privacy .icon { width: 1rem; height: 1rem; margin-right: .25rem; }
.account-panel { display: flex; align-items: center; gap: 1.3rem; }
.account-avatar { display: grid; place-items: center; width: 76px; height: 76px; min-width: 76px; background: #f5ebda; color: #9a6b2d; border: 1px solid #e8d5b4; border-radius: 50%; font: 600 2rem "Noto Serif Thai", serif; }
.account-signout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.account-signout > p { min-width: 0; overflow-wrap: anywhere; }
.account-signout > form { flex-shrink: 0; }
.quick-link { display: flex; align-items: center; gap: 1rem; height: 100%; min-width: 0; background: #fffdfa; border: 1px solid #e8dfcf; border-radius: 1rem; padding: 1.3rem; text-decoration: none; color: #4e3d26; }
.quick-link:hover { background: #fbf5e9; border-color: #cdb079; color: #6c4b1d; }
.quick-link > span:nth-child(2) { min-width: 0; flex: 1; }
.quick-link strong, .quick-link small { display: block; }
.quick-link small { color: #81745f; font-size: .79rem; line-height: 1.8; margin-top: .3rem; }
.quick-link > .icon { width: 1.1rem; height: 1.1rem; }
.quick-link-icon { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; border-radius: .8rem; background: #f4ecdc; color: #a27435; }
.workspace-note { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.2rem; margin-bottom: 2rem; border: 1px solid #e7dfcf; border-radius: .8rem; color: #7c6c52; font-size: .82rem; }
.workspace-note .icon { margin-top: .1rem; width: 1.2rem; }
.private-event-card { display: flex; flex-direction: column; }
.private-event-card h2 a { text-decoration: none; }
.private-event-card h2 { margin-bottom: 1rem; line-height: 1.7; }
.event-detail-line { display: flex; gap: .65rem; margin-bottom: .5rem !important; }
.event-detail-line .icon { width: 1.05rem; height: 1.05rem; margin-top: .2rem; color: #ac8a51; }
.event-card-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: 1rem; margin-top: auto; border-top: 1px solid #efe7db; font-size: .84rem; font-weight: 600; text-decoration: none; }
.event-card-link .icon { width: 1.1rem; height: 1.1rem; }
.event-workspace { margin: 1.5rem 0; padding: 1.4rem; background: #fffdfa; border: 1px solid #e8dfcf; border-radius: 1rem; }
.event-workspace nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.event-workspace .btn { margin-bottom: .5rem !important; }
.event-workspace .workspace-title { margin-bottom: 1rem; font-size: .85rem; font-weight: 600; color: #8f6e3e; }
.coordinate-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
dl dd { overflow-wrap: anywhere; }
@media (max-width: 991.98px) { .hero-copy { padding: 2.5rem 2rem 1.6rem; } .hero-art { padding: 0 2rem 2rem; } .brand-art { max-width: 360px; margin: 0 auto; } }
@media (max-width: 767.98px) {
  .hero h1 { font-size: 2.55rem; line-height: 1.6; }
  .hero-copy { padding: 1.9rem 1.4rem 1.2rem; }
  .hero-description { font-size: .95rem; }
  .hero-art { padding: 0 1.4rem 1.6rem; }
  .brand-art { max-width: 310px; }
  .home-actions .btn { width: 100%; }
  .hero-note { line-height: 1.8; }
  .account-login { padding: 2rem 1.2rem; }
  .account-panel { align-items: flex-start; gap: 1rem; }
  .account-avatar { width: 52px; height: 52px; min-width: 52px; font-size: 1.5rem; }
  .account-signout { flex-direction: column; align-items: stretch; }
  .account-signout .btn { width: 100%; }
  .quick-link { padding: 1.1rem; gap: .8rem; }
  .event-workspace { padding: 1rem; }
  .event-workspace nav .btn, .event-workspace > .btn { flex: 1 1 auto; width: auto; }
  dl dd { margin-bottom: 1rem; }
}
@media (max-width: 359.98px) { .hero h1 { font-size: 2.2rem; } .hero-copy { padding-left: 1.1rem; padding-right: 1.1rem; } }
@media print { .event-workspace, .home-actions, .hero { box-shadow: none; } .event-type-card:hover { transform: none; } }

.public-invitation-shell { padding-bottom: 0; }
.public-invitation-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e8dfcf; }
.public-invitation-content { max-width: 800px; padding-top: 2rem; padding-bottom: 3rem; }
.public-invitation-content .card { padding: 1.5rem !important; }
@media (max-width: 767.98px) { .public-invitation-content { padding-top: 1.5rem; } .public-invitation-content .card { padding: 1rem !important; } }

/* Home stays visible while event destinations scroll on narrow screens. */
.main-foot-navigation[data-admin-foot-nav] .navigation-items { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.main-foot-navigation.event-foot-navigation .navigation-items { display: flex; gap: .25rem; justify-content: flex-start; }
.main-foot-navigation.event-foot-navigation .event-navigation-destinations { display: flex; flex: 1 1 0; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: .4rem; gap: .5rem; }
.main-foot-navigation.event-foot-navigation .navigation-link { flex: 1 0 82px; justify-content: center; white-space: nowrap; min-height: 58px; }
.main-foot-navigation.event-foot-navigation .event-navigation-home { flex: 0 0 64px; }
.main-foot-navigation.event-foot-navigation .event-navigation-destinations:focus-visible { outline: 2px solid var(--sb-gold-deep); outline-offset: -2px; }
.event-navigation-locked { opacity: .55; cursor: default; }
.event-navigation-locked > span > .icon { width: 11px; height: 11px; }

/* Event art keeps portrait and landscape crops in separate upload slots. */
.event-artwork-image, .event-artwork-canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 6; object-fit: cover; border-radius: 1rem; background: #f5edde; }
.event-artwork.is-landscape :is(.event-artwork-image, .event-artwork-canvas) { aspect-ratio: 19 / 6; }
.event-artwork-slots { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1.5rem; align-items: start; min-width: 0; }
.event-artwork-slot { min-width: 0; }
.event-artwork-slot-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; color: var(--sb-ink); font-size: 1rem; }
.event-artwork-slot-title > span { margin-inline-start: auto; color: var(--sb-muted); font-size: .8rem; font-weight: 400; }
.house-event-card .event-artwork-slots .event-artwork { max-width: 20rem; }
.house-event-card .event-artwork-slots .is-landscape { max-width: none; }
@media (max-width: 767.98px) { .event-artwork-slots { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
.event-artwork-image.is-placeholder { opacity: .5; }
.event-artwork { container-type: inline-size; min-width: 0; }
.event-artwork-tools { border: 1px solid var(--bs-border-color, #e4d9c9); border-radius: .8rem; }
.event-artwork-tools > summary { padding: .75rem 1rem; min-height: 44px; cursor: pointer; }
.event-artwork-tools .form-label { width: 100%; }
.event-artwork-tools .form-range { display: block; min-height: 44px; margin: 0; }
.event-artwork-tools summary:focus-visible { outline: 2px solid var(--sb-gold-deep); outline-offset: 2px; border-radius: .8rem; }
.event-artwork [data-artwork-status]:empty { display: none; }
.event-artwork[aria-busy="true"] [data-artwork-status] { color: var(--sb-gold-deep); }

/* Design-image crops share one responsive, local-only workspace. */
.image-crop-dialog { width: min(72rem, calc(100% - 1rem)); max-width: none; max-height: calc(100dvh - 1rem); margin: auto; padding: 1rem; overflow: auto; border: 1px solid var(--sb-line); border-radius: 1rem; color: var(--sb-ink); background: var(--sb-surface); box-shadow: 0 24px 90px rgb(46 29 12 / 30%); }
.image-crop-dialog[open] { display: grid; gap: .75rem; }
.image-crop-dialog::backdrop { background: rgb(34 24 13 / 65%); }
.image-crop-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.image-crop-header :is(h2, strong) { margin: 0; color: var(--sb-ink); font-size: 1rem; }
.image-crop-toolbar, .image-crop-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.image-crop-toolbar :is(button, select, input), .image-crop-controls :is(button, select, input) { min-height: 44px; }
.image-crop-toolbar select, .image-crop-controls select { width: auto; max-width: 100%; min-width: 9rem; }
.image-crop-toolbar label, .image-crop-controls label { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; margin: 0; font-size: .85rem; }
.image-crop-viewport { position: relative; height: clamp(15rem, 50dvh, 38rem); min-width: 0; overflow: scroll; scrollbar-gutter: stable; overscroll-behavior: contain; touch-action: none; border: 1px solid #c9bba7; border-radius: .75rem; background: #eee7dc; }
.image-crop-viewport:focus-visible { outline-offset: -3px; }
.image-crop-board { position: relative; min-width: 100%; min-height: 100%; }
.image-crop-source { position: absolute; display: block; max-width: none; max-height: none; user-select: none; pointer-events: none; background-color: #fff; background-image: conic-gradient(#e6e1d8 25%, transparent 0 50%, #e6e1d8 0 75%, transparent 0); background-size: 16px 16px; }
.image-crop-frame { position: absolute; z-index: 2; box-sizing: border-box; border: 2px solid #fff9ed; outline: 1px solid #795019; box-shadow: 0 0 0 9999px rgb(31 23 14 / 52%); touch-action: none; cursor: move; }
.image-crop-frame::before, .image-crop-frame::after { content: ""; position: absolute; pointer-events: none; border-color: rgb(255 249 237 / 50%); border-style: solid; }
.image-crop-frame::before { inset: 33.333% 0; border-width: 1px 0; }
.image-crop-frame::after { inset: 0 33.333%; border-width: 0 1px; }
.image-crop-frame[data-crop-mode="full"] { cursor: grab; }
.image-crop-frame[data-crop-mode="full"]::before, .image-crop-frame[data-crop-mode="full"]::after { display: none; }
.image-crop-frame:focus-visible { outline: 3px solid #fff9ed; outline-offset: 2px; }
.image-crop-handle { position: absolute; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: .4rem; background: transparent; touch-action: none; }
.image-crop-handle::before { content: ""; width: 10px; height: 10px; border: 1px solid #795019; border-radius: 2px; background: #fff9ed; box-shadow: 0 1px 4px rgb(31 23 14 / 35%); }
.image-crop-handle:focus-visible { outline: 2px solid #fff9ed; outline-offset: -4px; }
.image-crop-handle[data-crop-handle="n"] { top: 0; left: 50%; transform: translate(-50%, -50%); cursor: ns-resize; }
.image-crop-handle[data-crop-handle="ne"] { top: 0; right: 0; transform: translate(50%, -50%); cursor: nesw-resize; }
.image-crop-handle[data-crop-handle="e"] { top: 50%; right: 0; transform: translate(50%, -50%); cursor: ew-resize; }
.image-crop-handle[data-crop-handle="se"] { right: 0; bottom: 0; transform: translate(50%, 50%); cursor: nwse-resize; }
.image-crop-handle[data-crop-handle="s"] { bottom: 0; left: 50%; transform: translate(-50%, 50%); cursor: ns-resize; }
.image-crop-handle[data-crop-handle="sw"] { bottom: 0; left: 0; transform: translate(-50%, 50%); cursor: nesw-resize; }
.image-crop-handle[data-crop-handle="w"] { top: 50%; left: 0; transform: translate(-50%, -50%); cursor: ew-resize; }
.image-crop-handle[data-crop-handle="nw"] { top: 0; left: 0; transform: translate(-50%, -50%); cursor: nwse-resize; }
.image-crop-preview { display: block; width: 100%; max-width: 15rem; height: 7rem; margin-inline: auto; object-fit: contain; border: 1px solid var(--sb-line); border-radius: .5rem; background: #eee7dc; }
.image-crop-status { min-height: 1.5em; margin: 0; color: var(--sb-muted); font-size: .8rem; }
.image-crop-actions { position: sticky; z-index: 4; bottom: -1rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin: 0 -1rem -1rem; padding: .75rem 1rem; border-top: 1px solid var(--sb-line); background: var(--sb-surface); }
.image-crop-actions > button { min-height: 44px; }
.event-artwork [data-artwork-preview] { display: block; width: 100%; height: auto; object-fit: contain; border-radius: .75rem; background: #faf6ee; }
.theme-upload-selection { display: flex; grid-column: 1 / -1; align-items: center; gap: .75rem; min-width: 0; }
.theme-upload-selection img { display: block; flex-shrink: 0; width: 120px; height: 90px; object-fit: contain; border: 1px solid var(--sb-line); border-radius: .6rem; background: #eee7dc; }
.theme-upload-selection span { min-width: 0; overflow-wrap: anywhere; color: var(--sb-muted); font-size: .8rem; }
.theme-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; }
@media (max-width: 767.98px) { .theme-upload-actions { margin-top: 0; } }
@media (max-width: 575.98px) { .image-crop-dialog { padding: .75rem; } .image-crop-viewport { height: 43dvh; min-height: 13rem; } .image-crop-actions { bottom: -.75rem; margin-inline: -.75rem; margin-bottom: -.75rem; padding-inline: .75rem; } .image-crop-preview { height: 5rem; } }

@container (max-width: 260px) {
  .event-artwork-tools > summary { padding: .65rem .5rem; font-size: .75rem; overflow-wrap: anywhere; }
  .event-artwork-fields { padding: .65rem !important; }
  .event-artwork-tools .form-label, .event-artwork-tools .form-text { font-size: .75rem; overflow-wrap: anywhere; }
  .event-artwork-tools .form-control { min-width: 0; max-width: 100%; font-size: .75rem; padding: .4rem; }
  .event-artwork-tools input[type="file"]::file-selector-button { display: block; margin: -.4rem -.4rem .4rem; width: calc(100% + .8rem); padding: .5rem; }
  .event-artwork-tools .row > * { width: 100%; }
  .event-artwork-tools .btn, [data-artwork-reload] { width: 100%; font-size: .75rem; white-space: normal; overflow-wrap: anywhere; padding: .5rem .35rem; min-height: 44px; }
}

/* A single list column keeps every event reachable in document order. */
.event-cards-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.event-card-item { display: block; min-width: 0; width: 100%; }
.event-card-item > .inline-card { margin-bottom: 0; }
.house-event-card .event-card-summary { display: none; }
.event-cards-grid .event-card-summary { display: block; }
.event-cards-grid .event-card-details, .event-cards-grid .house-event-card > [data-inline-view] > .inline-card-warning { display: none; }
.event-cards-grid .inline-card-header { align-items: flex-start; }
.event-cards-grid .preview-badge { white-space: normal; }
.event-cards-grid .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.event-cards-grid .form-control { min-width: 0; }
.house-event-card .event-artwork { max-width: 32rem; margin-inline: auto; }
@media (max-width: 575.98px) {
    .event-cards-grid { gap: .75rem; }
    .event-cards-grid .inline-card { padding: .65rem; border-radius: 1rem; }
    .event-cards-grid .inline-card-header { gap: .35rem; flex-wrap: wrap; }
    .event-cards-grid .inline-card-heading { width: 100%; }
    .event-cards-grid .inline-card-heading h2 { font-size: 1rem; line-height: 1.5; }
    .event-cards-grid .inline-card-heading p, .event-cards-grid .preview-badge { font-size: .75rem; }
    .event-cards-grid .event-card-summary { font-size: .85rem; }
    .event-cards-grid .btn { font-size: .8rem; padding-inline: .5rem; }
    .event-cards-grid .event-artwork-tools > summary { padding: .65rem .5rem; }
    .event-cards-grid .event-artwork-tools > div { padding: .5rem !important; }
    .event-cards-grid .form-label, .event-cards-grid .form-text { font-size: .8rem; }
}

/* Compact symbols retain full labels outside the overview and for assistive technology. */
.house-event-card .event-card-label-short, .house-event-card .event-card-facts { display: none; }
.event-cards-grid .event-card-label-short, .event-cards-grid .event-card-facts { display: inline-flex; align-items: center; gap: .3rem; }
.event-cards-grid .event-card-label-long, .event-cards-grid .inline-card-heading > p { display: none; }
.event-cards-grid .event-card-facts { display: flex; flex-wrap: wrap; gap: .4rem .65rem; margin-bottom: .65rem; color: var(--sb-muted); font-size: .75rem; }
.event-card-facts > span { display: inline-flex; align-items: center; gap: .25rem; }
.event-card-facts .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.event-cards-grid .event-card-summary > p { display: flex; align-items: flex-start; gap: .35rem; }
.event-cards-grid .event-card-summary .icon { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .2em; }
.event-cards-grid .event-card-summary [data-date-range], .event-cards-grid .event-card-venue { min-width: 0; }
.event-cards-grid .event-card-venue { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Overview cards navigate as one native link; editing belongs in the selected event. */
.event-overview-card { display: grid; grid-template-columns: 166.6667px minmax(0, 1fr); align-items: start; position: relative; color: var(--sb-ink, #302b23); text-decoration: none; }
.event-overview-card:hover { color: var(--sb-ink, #302b23); border-color: var(--sb-gold-deep); }
.event-overview-card:focus-visible { outline: 3px solid var(--sb-gold-deep); outline-offset: 3px; }
.event-overview-open { display: flex; justify-content: flex-end; margin-top: .75rem; color: var(--sb-gold-deep); }

/* Horizontal overview: fixed 250px-tall portrait at left, content at right. */
.event-cards-grid .event-overview-card { padding: 0; overflow: hidden; }
.event-overview-card .event-overview-media .event-artwork { position: relative; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; }
.event-overview-media { height: 250px; overflow: hidden; }
.event-overview-media .event-artwork-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.event-overview-body { display: flex; flex-direction: column; min-width: 0; min-height: 250px; padding: 1rem; }
.event-overview-body .inline-card-header { margin-bottom: .5rem; }
.event-overview-body .event-card-facts, .event-overview-body .event-card-role-badges { margin-bottom: .5rem; }
.event-card-role-badges { margin-bottom: 1rem; }
.event-overview-body .event-overview-open { margin-top: auto; padding-top: .5rem; }
@media (max-width: 575.98px) { .event-overview-body { padding: .65rem; } }

/* Dashboard sections share one rhythm; empty pagination does not create extra space. */
.event-dashboard { display: grid; gap: 1.25rem; min-width: 0; }
.event-dashboard > .page-header { margin: 0; }
.event-dashboard .event-overview-card { padding: .85rem; column-gap: .85rem; }
.event-dashboard .event-overview-media { border-radius: .75rem; }
.event-dashboard-section { display: grid; gap: 1rem; min-width: 0; }
.event-dashboard .section-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; }
.event-dashboard .event-cards-grid { gap: 1rem; }
.event-dashboard-pagination:empty { display: none; }
.event-dashboard-pagination :is(nav, ul, p) { margin-bottom: 0; }

/* Each fact stays on one line with a fixed-size symbol and an ellipsized label. */
.event-overview-card .icon { width: 1rem; height: 1rem; min-width: 1rem; flex-shrink: 0; }
.event-dashboard .event-overview-body { gap: .5rem; padding: 0; }
.event-dashboard .event-overview-body .inline-card-header { display: block; margin: 0; padding-inline-end: 3rem; }
.event-dashboard .event-overview-body .inline-card-heading { width: 100%; }
.event-dashboard .event-overview-body .inline-card-heading h2 { display: block; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.event-dashboard .event-overview-body .inline-card-heading > .event-card-host { display: flex; align-items: center; gap: .4rem; min-width: 0; margin: .25rem 0 0; color: var(--sb-muted); font-size: .75rem; line-height: 1.5; }
.event-card-host > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-dashboard .event-overview-body .event-card-facts { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-width: 0; margin: 0; }
.event-dashboard .event-card-facts > span { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
.event-dashboard .event-card-facts > span > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.event-dashboard .event-card-facts > span:last-child { flex: 0 0 1rem; }
.event-dashboard .event-overview-body .event-card-role-badges { flex-wrap: nowrap !important; min-width: 0; margin: 0; }
.event-dashboard .event-card-account-status { min-width: 0; white-space: nowrap; }
.event-dashboard .event-overview-body .event-card-summary { display: grid; gap: .5rem; min-width: 0; }
.event-dashboard .event-card-summary > .event-card-metadata-row { display: flex; align-items: center; gap: .4rem; min-width: 0; margin: 0 !important; }
.event-dashboard .event-card-summary .icon { margin-top: 0; }
.event-dashboard .event-card-summary :is([data-date-range], .event-card-venue) { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-dashboard .event-overview-body .event-overview-open { margin-top: auto; padding-top: 0; }
@media (max-width: 575.98px) {
    .event-dashboard .event-overview-card { grid-template-columns: min(166.6667px, 38%) minmax(0, 1fr); padding: .75rem; column-gap: .75rem; }
}

/* Dashboard tools are three labelled segments in one capsule. */
.event-dashboard-capsule { display: grid; grid-template-columns: minmax(0, 1fr) 52px 52px; min-width: 0; overflow: hidden; border: 1px solid #c9b08b; border-radius: 999px; background: var(--sb-surface); }
.event-invitation-capsule { grid-template-columns: minmax(0, 1fr) 52px; }
.event-dashboard-capsule:focus-within { outline: 2px solid var(--sb-gold); outline-offset: 2px; }
.event-dashboard-capsule .form-control { min-width: 0; min-height: 52px; padding-inline: 1.15rem; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.event-dashboard-search, .event-dashboard-create { display: grid; place-items: center; min-width: 44px; min-height: 52px; padding: .65rem; border: 0; border-left: 1px solid var(--sb-line); background: transparent; color: var(--sb-gold-deep); text-decoration: none; }
.event-dashboard-create { color: #fff; background: var(--sb-gold-deep); }
.event-dashboard-create:hover { color: #fff; background: #684216; }
.event-dashboard-search:hover { background: var(--sb-gold-light); }
.event-dashboard-search:focus-visible, .event-dashboard-create:focus-visible { outline-offset: -4px; }
.event-dashboard-create:focus-visible { outline-color: #fff; }
.event-role-ribbon { position: absolute; z-index: 1; top: 0; right: .85rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; width: 44px; height: 62px; padding-top: 8px; color: #fff; background: var(--sb-gold-deep); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.event-role-ribbon .icon { width: 1rem; height: 1rem; }
.event-role-caption { font-size: .7rem; line-height: 1.5; white-space: nowrap; }
.event-overview-card:not([data-event-overview-card]) .inline-card-heading::before { content: ""; float: right; width: 3.25rem; height: 4rem; }
.event-card-account-status { display: inline-flex; align-items: center; gap: .35rem; color: var(--sb-muted); font-size: .78rem; }
.event-overview-open, .event-overview-open .icon { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* A funeral remains the same domain type; its presentation is quietly monochrome. */
.house-event-card.is-monochrome { --sb-ink: #242424; --sb-muted: #626262; --sb-gold: #444; --sb-gold-deep: #303030; --sb-gold-light: #f1f1f1; --sb-line: #dedede; color: #242424; background: #fff; border-color: #d8d8d8; box-shadow: 0 4px 18px rgb(0 0 0 / 4%); }
.house-event-card.is-monochrome .event-artwork-image { filter: grayscale(1); background: #f4f4f4; }
.house-event-card.is-monochrome .event-card-account-status { color: #626262; }
.house-event-card.is-monochrome .inline-card-edit { color: #333; background: #fff; border-color: #aaa; }
.house-event-card.is-monochrome .inline-card-edit:hover { background: #ededed; }

.house-event-card.is-monochrome .preview-badge, .house-event-card.is-monochrome .inline-card-label { color: #444; border-color: #d6d6d6; background: #f4f4f4; }
.house-event-card.is-monochrome .btn-outline-primary, .house-event-card.is-monochrome .btn-outline-secondary { --bs-btn-color: #333; --bs-btn-border-color: #aaa; --bs-btn-hover-color: #111; --bs-btn-hover-bg: #eee; --bs-btn-hover-border-color: #777; --bs-btn-active-color: #111; --bs-btn-active-bg: #e4e4e4; --bs-btn-active-border-color: #666; }

/* Private directory cards keep all artwork visible behind a lower-half caption. */
.event-overview-card[data-event-overview-card] { display: block; container-type: inline-size; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; isolation: isolate; color: #fff9ed; background: #4b2f19; }
.event-overview-card[data-event-overview-card]:hover { color: #fff9ed; }
.event-overview-card[data-event-overview-card]::before { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 50%; pointer-events: none; background: linear-gradient(to bottom, rgb(75 47 25 / 0%) 0%, rgb(75 47 25 / 0%) 20%, rgb(75 47 25 / 80%) 58%, rgb(75 47 25 / 96%) 100%); }
.event-overview-card[data-event-overview-card] .event-overview-media { position: absolute; inset: 0; height: 100%; border-radius: 0; }
.event-overview-card[data-event-overview-card] .event-artwork-image { opacity: 1; }
.event-overview-card[data-event-overview-card] .event-overview-body { position: absolute; z-index: 2; inset: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(.12rem, .5cqi, .4rem); min-height: 0; padding: clamp(.65rem, 2cqi, 1.4rem); color: #fff9ed; text-shadow: 0 1px 4px rgb(48 28 13 / 70%); }
.event-overview-card[data-event-overview-card] .inline-card-header { grid-column: 1 / -1; grid-row: 1; padding: 0; margin: 0; }
.event-overview-card[data-event-overview-card] .inline-card-heading h2 { color: #fff9ed; font-size: clamp(.95rem, 2.4cqi, 1.65rem); line-height: 1.4; }
.event-overview-card[data-event-overview-card] .inline-card-heading > .event-card-host { gap: .35rem; margin-top: .1rem; color: #f7ebd9; font-size: clamp(.66rem, 1.6cqi, .95rem); line-height: 1.45; }
.event-overview-card[data-event-overview-card] .event-card-summary { grid-column: 1 / -1; grid-row: 2; display: flex; gap: .75rem; min-width: 0; font-size: clamp(.67rem, 1.6cqi, .9rem); line-height: 1.45; }
.event-overview-card[data-event-overview-card] .event-card-summary > .event-card-metadata-row { gap: .3rem; color: #fff2dc !important; }
.event-overview-card[data-event-overview-card] .event-card-summary > .event-card-metadata-row:first-child { flex: 0 1 auto; }
.event-overview-card[data-event-overview-card] .event-card-summary > .event-card-metadata-row:last-child { flex: 1 1 0; }
.event-overview-card[data-event-overview-card] .event-card-facts { grid-column: 1; grid-row: 3; gap: .5rem; margin: 0; color: #f1dfc4; font-size: clamp(.64rem, 1.4cqi, .82rem); line-height: 1.4; }
.event-overview-card[data-event-overview-card] .event-card-role-badges { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.event-overview-card[data-event-overview-card] .event-overview-open { grid-column: 2; grid-row: 3; align-self: end; margin: 0; padding: 0; color: #fff9ed; }
.event-overview-card[data-event-overview-card] .event-overview-body .icon { width: .95em; height: .95em; min-width: .95em; }
.event-overview-card[data-event-overview-card] .event-role-ribbon { z-index: 3; }
.event-overview-card[data-event-overview-card] .event-additional-count { flex-shrink: 0; }
@container (max-width: 420px) {
    .event-overview-card[data-event-overview-card] .event-overview-body { padding: .3rem .55rem .4rem; gap: .08rem; }
    .event-overview-card[data-event-overview-card] .inline-card-heading h2 { line-height: 1.2; }
    .event-overview-card[data-event-overview-card] .event-overview-open { display: none; }
}

/* Private profile: saved details and explicit editors share one padded tab panel. */
.personal-profile-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.personal-profile-tabs .action-tab { min-width: 0; white-space: normal; text-align: center; }
.personal-profile-panel { min-width: 0; padding: 1.5rem; margin-bottom: 1.25rem; scroll-margin-top: 1.5rem; }
.personal-profile-panel .section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.personal-profile-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin-bottom: 1.5rem; }
.personal-profile-summary > div { min-width: 0; }
.personal-profile-summary dt { margin-bottom: .25rem; color: var(--sb-muted); font-size: .85rem; font-weight: 400; }
.personal-profile-summary dd { margin: 0; overflow-wrap: anywhere; }
.personal-profile-editor { border-top: 1px solid var(--sb-line); padding-top: 1rem; }
.personal-profile-editor > summary { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 44px; padding: .55rem .8rem; color: var(--sb-gold-deep); border: 1px solid var(--sb-line); border-radius: .65rem; cursor: pointer; list-style: none; }
.personal-profile-editor > summary::-webkit-details-marker { display: none; }
.personal-profile-editor > summary:hover { background: var(--sb-gold-light); }
.personal-profile-editor > summary:focus-visible { outline: 2px solid var(--sb-gold-deep); outline-offset: 3px; }
.personal-profile-former-names { padding: 1rem; border: 1px solid var(--sb-line); border-radius: .8rem; }
.personal-profile-former-names > legend { float: none; width: auto; padding-inline: .35rem; }
.personal-profile-former-row { display: flex; align-items: flex-end; gap: .65rem; min-width: 0; }
.personal-profile-former-row + .personal-profile-former-row { margin-top: 1rem; }
.personal-profile-former-row > div { min-width: 0; }
.personal-profile-former-row > .btn { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
@media (max-width: 575.98px) {
    .personal-profile-tabs .action-tab { flex-direction: column; gap: .25rem; padding: .5rem .25rem; font-size: .76rem; }
    .personal-profile-panel { padding: 1rem; }
    .personal-profile-summary { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .personal-profile-former-names { padding: .8rem; }
}
.invitation-registration-artwork { margin: -1.5rem -1.5rem 1.25rem; overflow: hidden; border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0; background: #eee7dc; aspect-ratio: var(--invitation-artwork-width, 19) / var(--invitation-artwork-height, 6); }
.invitation-registration-artwork img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ecard-central-module { margin: clamp(1rem, 4vw, 2rem); color: inherit; font: inherit; }
.ecard-central-module-content { color: inherit; font: inherit; }
.ecard-central-module-preview { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 5rem; padding: 1rem; border: 1px dashed currentColor; border-radius: 1rem; color: inherit; font: inherit; }
.ecard-central-module-preview .icon { width: 1.35em; height: 1.35em; }