/* Diana's read-only member walkthrough. The tenant's existing palette owns the page. */
@view-transition { navigation: none; }
.dcm {
  --dcm-surface: color-mix(in srgb, var(--dc-ivory) 4%, var(--dc-ink));
  --dcm-timba: #ef9bff;
  padding-top: 1.5rem;
  padding-bottom: 4.5rem;
  color: var(--dc-ivory);
  font-size: .875rem;
  line-height: 1.7;
}
.dcm :where(h1,h2,p,dl,dd) { margin: 0; }
.dcm :where(a) { text-decoration: none; }
.dcm :where(a,summary):focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 4px; }
.dcm :where(h1,h2) { font-family: var(--font-display); font-weight: 400; letter-spacing: -.04em; line-height: 1.3; }
.dcm :where(img) { display: block; max-width: 100%; }
.dcm-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1rem 1.25rem; border: 1px solid var(--dc-line); border-left: 2px solid var(--dc-accent); background: var(--dcm-surface); }
.dcm-notice strong { color: var(--dc-accent); font-size: .75rem; font-weight: 600; }
.dcm-notice p { margin-top: .2rem; font-size: .75rem; color: var(--dc-muted); }
.dcm-notice a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; flex-shrink: 0; color: var(--dc-ivory); font-size: .75rem; }
.dcm-layout { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: clamp(1.75rem,4vw,4rem); padding-top: 3rem; }
.dcm-sidebar { min-width: 0; }
.dcm-person { display: flex; align-items: center; gap: .8rem; margin: .3rem 0 2rem; }
.dcm-avatar { display: inline-flex; width: 2.75rem; height: 2.75rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--dc-accent); border-radius: 50%; color: var(--dc-accent); background: color-mix(in srgb,var(--dc-accent) 8%,var(--dc-ink)); font-family: var(--font-display); font-size: 1.25rem; }
.dcm-person strong { display: block; font-weight: 500; font-size: .8125rem; }
.dcm-person div > span { display: block; color: var(--dc-muted); font-size: .6875rem; margin-top: .15rem; }
.dcm-nav { display: flex; flex-direction: column; }
.dcm-nav a { display: flex; align-items: center; gap: .65rem; min-height: 3.25rem; padding: .65rem .5rem; border-bottom: 1px solid var(--dc-line); color: var(--dc-muted); font-size: .75rem; }
.dcm-nav a:first-child { border-top: 1px solid var(--dc-line); }
.dcm-nav a > span:first-child { font-size: .6875rem; color: var(--dc-accent); }
.dcm-nav a[aria-current=page] { color: var(--dc-ivory); background: color-mix(in srgb,var(--dc-accent) 10%,var(--dc-ink)); }
.dcm-nav a:hover { color: var(--dc-accent); }
.dcm-nav-arrow { margin-left: auto; font-size: 1rem; }
.dcm-sidebar-note { margin-top: 2rem !important; font-family: var(--font-display); font-size: .8125rem; }
.dcm-sidebar-note span { font-family: var(--font-sans); font-size: .6875rem; color: var(--dc-muted); }
.dcm-main { min-width: 0; }
.dcm-heading { margin-bottom: 2rem; }
.dcm-eyebrow { color: var(--dc-accent); font-size: .6875rem; line-height: 1.7; letter-spacing: .12em; text-transform: uppercase; }
.dcm-heading h1 { margin: .75rem 0 .8rem; font-size: clamp(1.875rem,3.2vw,3rem); }
.dcm-heading > p:last-child { max-width: 36rem; color: var(--dc-muted); font-size: .8125rem; }
.dcm-feature { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.45fr); border: 1px solid color-mix(in srgb,var(--dcm-timba) 34%,var(--dc-ink)); background: color-mix(in srgb,var(--dcm-timba) 5%,var(--dc-ink)); }
.dcm-feature-poster { align-self: center; padding: 1rem; }
.dcm-feature-poster img { width: 100%; height: auto; object-fit: contain; }
.dcm-feature-copy { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.5rem .75rem; }
.dcm-feature-top { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
.dcm-feature .dcm-eyebrow { color: var(--dcm-timba); }
.dcm-feature h2 { margin-top: 1rem; font-size: clamp(1.875rem,3vw,2.8rem); }
.dcm-teachers { margin-top: .6rem !important; font-size: .75rem; color: var(--dc-muted); }
.dcm-event-facts { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; margin-top: 1.25rem !important; }
.dcm-event-facts dt { color: var(--dc-muted); font-size: .6875rem; margin-bottom: .25rem; }
.dcm-event-facts dd { font-size: .75rem; line-height: 1.8; }
.dcm-event-facts dd span { color: var(--dc-muted); font-size: .6875rem; }
.dcm-feature-bottom { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; margin-top: auto; }
.dcm-feature-bottom p > strong { display: block; font-size: 1.3rem; font-weight: 500; line-height: 1.4; }
.dcm-feature-bottom p > span { display: block; color: var(--dc-muted); font-size: .6875rem; }
.dcm-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 2.75rem; padding: .7rem 1rem; font-size: .75rem; font-weight: 600; }
.dcm-button-timba { background: var(--dcm-timba); color: var(--dc-ink); }
.dcm-button-timba:hover { background: var(--dc-ivory); }
.dcm-status { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; padding: .25rem .6rem; border: 1px solid var(--dc-line); border-radius: 2rem; color: var(--dc-ivory); font-size: .6875rem; line-height: 1.6; }
.dcm-status::before { content: ''; width: .3rem; height: .3rem; flex-shrink: 0; border-radius: 50%; background: var(--dc-accent); }
.dcm-status-pending::before { background: transparent; outline: 1px solid var(--dc-accent); }
.dcm-overview-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin-top: 1rem; }
.dcm-card { display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--dc-line); }
.dcm-card h2 { margin-top: .6rem; font-size: 1.5rem; }
.dcm-card-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.dcm-card-heading h2 { font-family: var(--font-sans); font-size: 1.65rem; }
.dcm-card > p:not(.dcm-eyebrow) { margin-top: .8rem; margin-bottom: 1rem; color: var(--dc-muted); font-size: .75rem; }
.dcm-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin-top: auto; color: var(--dc-accent); font-size: .75rem; }
.dcm-text-link:hover { color: var(--dc-ivory); text-decoration: underline; text-underline-offset: .3rem; }
.dcm-travel { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.45fr); margin-top: 2rem; overflow: hidden; border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); }
.dcm-travel > img { width: 100%; height: 100%; min-height: 14rem; object-fit: cover; object-position: 45% 50%; }
.dcm-travel > div { padding: 1.5rem; }
.dcm-travel h2 { margin-top: .5rem; font-size: 1.65rem; }
.dcm-travel div > p:not(.dcm-eyebrow) { color: var(--dc-muted); margin-top: .65rem; font-size: .75rem; }
.dcm-travel .dcm-text-link { margin-top: .75rem; }
.dcm-ticket { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--dc-line); margin-bottom: 1rem; }
.dcm-ticket-poster img { width: 100%; height: auto; object-fit: contain; }
.dcm-ticket-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.dcm-ticket h2 { font-size: 1.8rem; }
.dcm-ticket-date { margin-top: .5rem !important; font-size: .8125rem; }
.dcm-ticket-place { margin-top: .2rem !important; font-size: .75rem; color: var(--dc-muted); }
.dcm-ticket-price { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.dcm-ticket-price strong { font-size: 1.4rem; font-weight: 500; }
.dcm-ticket-price > span { color: var(--dc-muted); font-size: .75rem; }
.dcm-details { margin-top: 1rem; border-top: 1px solid var(--dc-line); }
.dcm-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .65rem 0; cursor: pointer; list-style: none; color: var(--dc-accent); font-size: .75rem; }
.dcm-details > summary::-webkit-details-marker { display: none; }
.dcm-details > summary > span { font-size: 1.2rem; }
.dcm-details[open] > summary > span { transform: rotate(45deg); }
.dcm-details dl { display: grid; gap: .8rem; padding-top: .5rem; }
.dcm-details dl > div { display: grid; grid-template-columns: minmax(5rem,.8fr) minmax(0,1.5fr); gap: 1rem; font-size: .75rem; }
.dcm-details dt { color: var(--dc-muted); }
.dcm-details dd { overflow-wrap: anywhere; }
.dcm-details > p { color: var(--dc-muted); padding: 1rem 0 .25rem; font-size: .6875rem; }
.dcm-pair-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 9rem; align-self: start; border: 1px solid var(--dc-line); background: color-mix(in srgb,var(--dc-accent) 6%,var(--dc-ink)); }
.dcm-pair-mark > span { font-family: var(--font-display); font-size: 3.5rem; line-height: 1.3; color: var(--dc-accent); }
.dcm-pair-mark > small { font-size: .6875rem; color: var(--dc-muted); }
.dcm-payment-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid var(--dc-line); margin-bottom: 2rem; }
.dcm-payment-summary article { display: flex; flex-direction: column; align-items: start; padding: 1.5rem; }
.dcm-payment-summary article + article { border-left: 1px solid var(--dc-line); }
.dcm-payment-summary article > strong { font-weight: 400; font-size: 2rem; margin-top: .5rem; }
.dcm-payment-summary article > span { font-size: .75rem; color: var(--dc-muted); }
.dcm-payment { padding: 1.5rem; border: 1px solid var(--dc-line); margin-bottom: 1rem; }
.dcm-payment-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.dcm-payment h2 { margin-top: .5rem; font-size: 1.5rem; }
.dcm-payment-header > div > p:not(.dcm-eyebrow) { color: var(--dc-muted); margin-top: .3rem; font-size: .75rem; }
.dcm-payment-amount { display: flex; flex-direction: column; align-items: end; gap: .65rem; }
.dcm-payment-amount strong { font-size: 1.5rem; font-weight: 400; white-space: nowrap; }
.dcm-profile { border: 1px solid var(--dc-line); padding: 1.5rem; }
.dcm-profile-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.5rem; }
.dcm-profile-heading h2 { font-size: 1.5rem; }
.dcm-profile-heading p { margin-top: .25rem; color: var(--dc-muted); font-size: .75rem; }
.dcm-profile-heading > .dcm-status { margin-left: auto; }
.dcm-profile-fields > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 1rem; border-top: 1px solid var(--dc-line); padding: 1.25rem .25rem; font-size: .8125rem; }
.dcm-profile-fields dt { color: var(--dc-muted); }
.dcm-profile-fields dd { overflow-wrap: anywhere; }
.dcm-footnote { margin-top: 2rem !important; padding-top: 1rem; border-top: 1px solid var(--dc-line); color: var(--dc-muted); font-size: .6875rem; }
@media(max-width:1120px) {
  .dcm-layout { grid-template-columns: 9.5rem minmax(0,1fr); gap: 1.75rem; }
  .dcm-feature { grid-template-columns: minmax(0,.85fr) minmax(0,1.3fr); }
  .dcm-feature-copy { padding: 1.25rem 1.25rem 1.25rem .5rem; }
  .dcm-event-facts { grid-template-columns: 1fr; gap: .75rem; }
  .dcm-feature h2 br { display: none; }
  .dcm-feature h2 { font-size: 2rem; }
  .dcm-ticket { grid-template-columns: 6rem minmax(0,1fr); gap: 1.25rem; }
}
@media(max-width:760px) {
  .dcm { padding-top: .75rem; padding-bottom: 3rem; }
  .dcm-notice { align-items: start; flex-direction: column; gap: .25rem; padding: 1rem; }
  .dcm-layout { grid-template-columns: minmax(0,1fr); gap: 2rem; padding-top: 1.5rem; }
  .dcm-person { margin: 0 0 1rem; }
  .dcm-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--dc-line); }
  .dcm-nav a { flex-direction: column; align-items: start; justify-content: center; padding: .6rem; border: 0; gap: .1rem; font-size: .6875rem; }
  .dcm-nav a:first-child { border: 0; }
  .dcm-nav-arrow,.dcm-sidebar-note { display: none; }
  .dcm-heading { margin-bottom: 1.5rem; }
  .dcm-heading h1 { font-size: clamp(1.875rem,6vw,2.75rem); }
  .dcm-feature { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
  .dcm-feature-copy { padding: 1.25rem 1rem 1.25rem .25rem; }
  .dcm-feature h2 { font-size: 1.875rem; }
  .dcm-event-facts { margin-top: 1rem !important; }
  .dcm-feature-bottom { padding-top: 1rem; }
  .dcm-overview-cards { gap: .75rem; }
  .dcm-card { padding: 1.1rem; }
  .dcm-travel > div { padding: 1.25rem; }
}
@media(max-width:480px) {
  .dcm-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dcm-notice p { line-height: 1.8; }
  .dcm-nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dcm-nav a { flex-direction: row; align-items: center; justify-content: start; gap: .5rem; min-height: 2.75rem; font-size: .75rem; padding: .65rem .8rem; }
  .dcm-feature { grid-template-columns: minmax(0,1fr); }
  .dcm-feature-poster { padding: 1.25rem 2.5rem .25rem; }
  .dcm-feature-poster img { max-width: 17rem; margin-inline: auto; }
  .dcm-feature-copy { padding: 1.25rem; }
  .dcm-feature h2 { font-size: 2.25rem; }
  .dcm-feature h2 br { display: none; }
  .dcm-event-facts { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .dcm-feature-bottom { align-items: stretch; flex-direction: column; }
  .dcm-button { width: 100%; }
  .dcm-overview-cards { grid-template-columns: minmax(0,1fr); }
  .dcm-card { padding: 1.25rem; }
  .dcm-travel { grid-template-columns: minmax(0,1fr); margin-top: 1.5rem; }
  .dcm-travel > img { height: 11rem; min-height: 0; }
  .dcm-ticket { grid-template-columns: minmax(0,1fr); padding: 1.25rem; }
  .dcm-ticket-poster { max-width: 11rem; margin-inline: auto; }
  .dcm-pair-mark { display: none; }
  .dcm-ticket h2 { font-size: 1.65rem; }
  .dcm-payment-summary { grid-template-columns: minmax(0,1fr); }
  .dcm-payment-summary article { padding: 1.25rem; }
  .dcm-payment-summary article + article { border-left: 0; border-top: 1px solid var(--dc-line); }
  .dcm-payment { padding: 1.25rem; }
  .dcm-payment-header { flex-direction: column; }
  .dcm-payment-amount { align-items: start; flex-direction: row; align-self: stretch; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .dcm-payment h2 { font-size: 1.4rem; }
  .dcm-profile { padding: 1.25rem; }
  .dcm-profile-heading { gap: .75rem; }
  .dcm-profile-heading h2 { font-size: 1.25rem; }
  .dcm-profile-heading > .dcm-status { margin-left: 0; }
  .dcm-profile-fields > div { grid-template-columns: minmax(0,1fr); gap: .35rem; padding-block: 1rem; }
}