/* Shared ticket changes: native host font, one scroll area, one clear action. */
.sum-ticket-change {
 --change-ink:var(--ink,#1e293b);
 --change-paper:var(--cream,#fff8e9);
 --change-yellow:var(--yellow,#ffd43c);
 --change-cyan:var(--cyan,#28bdd5);
 --change-orange:var(--orange,#f25021);
 --change-button-ink:#111827;
 --change-line:rgba(30,41,59,.25);
 box-sizing:border-box;
 display:flex;
 flex-direction:column;
 min-width:0;
 min-height:0;
 color:var(--change-ink);
 background:var(--change-paper);
 font:inherit;
 font-size:16px;
 line-height:1.5;
 overflow-wrap:anywhere;
}
.sum-ticket-change *, .sum-ticket-change *::before, .sum-ticket-change *::after { box-sizing:border-box; }
dialog.sum-ticket-change {
 width:min(660px,calc(100vw - 24px));
 max-width:calc(100vw - 24px);
 max-height:calc(100vh - 24px);
 max-height:calc(100dvh - 24px);
 margin:auto;
 padding:0;
 overflow:hidden;
 border:1px solid var(--change-ink);
 border-radius:6px;
 box-shadow:none;
}
dialog.sum-ticket-change:not([open]) { display:none; }
dialog.sum-ticket-change[open] { display:flex; }
dialog.sum-ticket-change::backdrop { background:rgba(20,24,31,.6); backdrop-filter:blur(3px); }
/* Author host nests a section inside the dialog. It is not a second panel. */
dialog.sum-ticket-change > .sum-ticket-change,
dialog.sum-ticket-change > section:has(> .sum-ticket-change),
dialog.sum-ticket-change > section > .sum-ticket-change {
 flex:1 1 auto;
 width:100%;
 min-height:0;
 max-height:inherit;
 padding:0;
 margin:0;
 border:0;
 border-radius:0;
 box-shadow:none;
 overflow:hidden;
}
dialog.sum-ticket-change > section:has(> .sum-ticket-change) { display:flex; flex-direction:column; }
.sum-ticket-change .ticket-change-header {
 display:grid;
 grid-template-columns:minmax(0,1fr) 44px;
 align-items:start;
 gap:12px;
 flex:0 0 auto;
 padding:16px 20px 8px;
 border-bottom:0;
 background:var(--change-paper);
}
.sum-ticket-change h2,
.sum-ticket-change .ticket-change-header h2 {
 margin:0;
 padding:0;
 font:inherit;
 font-size:clamp(26px,3.2vw,34px);
 line-height:1.2;
 font-weight:900;
 letter-spacing:0;
 text-wrap:balance;
}
.sum-ticket-change h3 { margin:0; font:inherit; font-size:20px; line-height:1.3; font-weight:900; }
.sum-ticket-change p { margin:0; font-size:16px; line-height:1.5; }
.sum-ticket-change .ticket-change-heading { min-width:0; }
.sum-ticket-change .ticket-change-ticket { margin-top:6px; font-size:14px; line-height:1.45; font-weight:400; }
.sum-ticket-change .ticket-change-intro,
.sum-ticket-change .ticket-change-context p { font-size:14px; line-height:1.45; }
.sum-ticket-change .ticket-change-summary.ticket-change-context > * + * { margin-top:4px; }
.sum-ticket-change .ticket-change-selection { display:grid; gap:4px; }
.sum-ticket-change .ticket-change-selection .ticket-change-count { margin:0; }
.sum-ticket-change .ticket-change-dismiss,
.sum-ticket-change button[data-change-dismiss] {
 display:grid;
 place-items:center;
 width:44px;
 min-width:44px;
 height:44px;
 min-height:44px;
 padding:0;
 margin:0;
 border:1px solid var(--change-line);
 border-radius:50%;
 background:transparent;
 color:var(--change-ink);
 font:inherit;
 font-size:28px;
 line-height:1;
 box-shadow:none;
 cursor:pointer;
}
.sum-ticket-change .ticket-change-dismiss:not(:disabled):hover { background:var(--change-ink); color:var(--change-paper); border-color:var(--change-ink); }
.sum-ticket-change .ticket-change-dismiss svg { width:20px; height:20px; display:block; }
.sum-ticket-change .ticket-change-body {
 display:flex;
 flex-direction:column;
 flex:1 1 auto;
 gap:12px;
 min-width:0;
 min-height:0;
 overflow:auto;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
 scroll-padding-block:16px;
 padding:12px 20px;
}
.sum-ticket-change .ticket-change-body > * { flex-shrink:0; min-width:0; }
.sum-ticket-change [data-author-change="body"] { display:grid; gap:10px; }
.sum-ticket-change .ticket-change-body > :empty:not(input):not(select):not(textarea) { display:none; }
.sum-ticket-change [data-upgrade-body] { display:grid; gap:16px; }
.sum-ticket-change .ticket-change-actions {
 position:sticky;
 bottom:0;
 z-index:2;
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:12px;
 flex:0 0 auto;
 margin:0;
 padding:12px 20px;
 border-top:0;
 background:var(--change-paper);
 color:var(--change-ink);
}
.sum-ticket-change .ticket-change-actions:empty { display:none; }
.sum-ticket-change .ticket-change-actions > .ticket-change-progress,
.sum-ticket-change .ticket-change-actions > .ticket-change-reason { flex:0 0 100%; }
.sum-ticket-change .button {
 margin:0;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 min-width:0;
 min-height:48px;
 max-width:100%;
 padding:13px 18px;
 border:1px solid var(--change-ink);
 border-radius:3px;
 font:inherit;
 font-size:16px;
 line-height:1.3;
 font-weight:900;
 text-align:center;
 white-space:normal;
 overflow-wrap:anywhere;
 text-decoration:none;
 cursor:pointer;
}
.sum-ticket-change .button.ticket-change-primary,
.sum-ticket-change .button.ticket-change-primary.primary {
 flex:0 1 auto;
 width:auto;
 max-width:min(100%,360px);
 background:var(--change-orange);
 color:var(--change-button-ink);
 border-color:var(--change-ink);
 --button-shadow:var(--change-ink);
}
.sum-ticket-change .button.ticket-change-primary:hover { background:var(--change-orange); color:var(--change-button-ink); }
.sum-ticket-change .button.ticket-change-secondary {
 flex:0 1 auto;
 background:var(--change-ink);
 color:var(--change-paper);
 border-color:var(--change-ink);
 font-weight:900;
 --button-shadow:var(--change-orange);
}
.sum-ticket-change .button.ticket-change-secondary:hover { background:var(--change-ink); color:var(--change-paper); border-color:var(--change-ink); }
.sum-ticket-change .button:not(:disabled):hover { transform:translateY(-3px); box-shadow:4px 5px 0 var(--button-shadow,var(--change-orange)); }
.sum-ticket-change button:disabled,
.sum-ticket-change .button:disabled {
 opacity:1;
 color:#58616a;
 background:#eee9de;
 border-color:#b7b6b0;
 box-shadow:none;
 cursor:not-allowed;
}
.sum-ticket-change .button.ticket-change-primary:disabled { color:#58616a; background:#eee9de; border-color:#b7b6b0; }
.sum-ticket-change .field { display:block; min-width:0; margin:0; font-size:16px; font-weight:900; }
.sum-ticket-change select {
 display:block;
 width:100%;
 max-width:100%;
 min-width:0;
 min-height:48px;
 margin-top:8px;
 padding:10px 12px;
 border:1px solid var(--change-ink);
 border-radius:3px;
 background:#fffdf6;
 color:var(--change-ink);
 font:inherit;
 font-size:16px;
}
.sum-ticket-change fieldset { min-width:0; margin:0; padding:0; border:0; border-radius:0; }
.sum-ticket-change legend { margin:0 0 10px; padding:0; font-size:16px; font-weight:900; }
.sum-ticket-change .ticket-change-help { margin:0; font-size:14px; line-height:1.5; }
.sum-ticket-change fieldset > .ticket-change-help { margin:0 0 12px; }
.sum-ticket-change .ticket-change-count { margin:10px 0 0; font-size:14px; line-height:1.5; }
.sum-ticket-change fieldset > div { display:grid; gap:10px; }
.sum-ticket-change .ticket-choice {
 min-width:0;
 margin:0;
 border:2px solid var(--change-line);
 border-radius:4px;
 background:#fffdf6;
 overflow-wrap:anywhere;
}
.sum-ticket-change .ticket-choice > label,
.sum-ticket-change label.ticket-choice {
 display:grid;
 grid-template-columns:22px minmax(0,1fr);
 align-items:start;
 gap:12px;
 min-height:44px;
 padding:10px 12px;
 font-size:16px;
 line-height:1.5;
 cursor:pointer;
}
.sum-ticket-change .ticket-choice input[type=radio],
.sum-ticket-change .ticket-choice input[type=checkbox] {
 width:22px;
 height:22px;
 min-width:22px;
 min-height:22px;
 margin:1px 0 0;
 padding:0;
 accent-color:var(--change-ink);
 cursor:inherit;
}
.sum-ticket-change .ticket-choice-copy { display:block; min-width:0; }
.sum-ticket-change .ticket-choice-title { display:block; font-size:16px; line-height:1.45; font-weight:900; }
.sum-ticket-change .ticket-choice:has(input:checked) { border-color:var(--change-ink); background:var(--change-cyan); box-shadow:3px 3px 0 var(--change-ink); }
.sum-ticket-change .ticket-choice:has(input:disabled:not(:checked)) { background:#fffdf6; border-color:var(--change-line); }
.sum-ticket-change .ticket-choice:has(input:disabled) > label { cursor:not-allowed; }
.sum-ticket-change .ticket-choice-details { margin:0 12px 0 46px; font-size:16px; line-height:1.5; }
.sum-ticket-change .ticket-choice-details summary { min-height:44px; padding:10px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.sum-ticket-change .ticket-choice-details ul,
.sum-ticket-change .ticket-change-summary ul { padding-left:20px; margin:4px 0 0; }
.sum-ticket-change .ticket-choice-details li,
.sum-ticket-change .ticket-change-summary li { margin:6px 0; padding:0; }
.sum-ticket-change .ticket-change-summary { margin:0; padding:0; border:0; background:transparent; }
.sum-ticket-change .ticket-change-summary strong { font-weight:900; }
.sum-ticket-change .ticket-category-price { display:block; margin-top:4px; font-size:14px; line-height:1.4; }
.sum-ticket-change .ticket-change-quote > p { font-size:22px; }
.sum-ticket-change .ticket-change-result h3 { font-size:26px; }
.sum-ticket-change .ticket-change-result p { font-size:14px; }
.sum-ticket-change .ticket-change-summary > * + * { margin-top:8px; }
.sum-ticket-change .ticket-change-status { margin:0; padding:0; border:0; background:transparent; color:var(--change-ink); font-size:14px; line-height:1.5; }
.sum-ticket-change .ticket-change-status.error { font-weight:700; }
.sum-ticket-change .ticket-change-status.ticket-change-instruction { padding:0; border:0; background:transparent; font-size:14px; }
.sum-ticket-change .ticket-change-status:empty,
.sum-ticket-change .ticket-change-summary:empty { display:none; }
.sum-ticket-change [hidden] { display:none !important; }
.sum-ticket-change :focus-visible { outline:3px solid var(--change-ink); outline-offset:3px; }
.sum-ticket-change .ticket-choice:has(input:focus-visible) { outline:3px solid var(--change-ink); outline-offset:3px; }
@media (min-width:640px) {
 .sum-ticket-change fieldset > div { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
}
@media (max-width:600px) {
 .sum-ticket-change .ticket-change-header h2 { font-size:26px; }
}
@media (max-width:480px) {
 .sum-ticket-change .ticket-change-header { padding:12px 16px 6px; gap:8px; }
 .sum-ticket-change .ticket-change-body { padding:10px 16px; gap:10px; }
 .sum-ticket-change .ticket-change-actions { flex-direction:column; align-items:stretch; padding:12px 16px; gap:8px; }
 .sum-ticket-change .ticket-change-actions > .button { width:100%; max-width:100%; flex:0 0 auto; }
 .sum-ticket-change .ticket-choice > label, .sum-ticket-change label.ticket-choice { padding:8px 12px; gap:10px; }
 .sum-ticket-change .ticket-choice-details { margin-left:44px; margin-right:12px; }
}
@media (max-height:520px) {
 .sum-ticket-change .ticket-change-header { padding-block:10px; }
 .sum-ticket-change .ticket-change-body { padding-block:12px; }
 .sum-ticket-change .ticket-change-actions { padding-block:10px; }
}
@media (prefers-reduced-motion:reduce) {
 .sum-ticket-change, .sum-ticket-change .button { animation:none; transition:none; }
}
@media (hover:none) {
 .sum-ticket-change .button:not(:disabled):hover { transform:none; box-shadow:none; }
}
@media (forced-colors:active) {
 .sum-ticket-change .ticket-choice:has(input:checked) { border-color:Highlight; }
 .sum-ticket-change :focus-visible { outline-color:Highlight; }
 .sum-ticket-change button:disabled { color:GrayText; border-color:GrayText; }
}
/* Keep the author's deadline and choice together without stacked panel padding. */
.sum-ticket-change:has([data-author-change="body"]) .ticket-change-header{padding-bottom:0}
.sum-ticket-change:has([data-author-change="body"]) .ticket-change-body{padding-block:6px 8px}
.sum-ticket-change [data-author-change="body"]{gap:6px}
.sum-ticket-change:has([data-author-change="body"]) legend{margin-bottom:8px}

/* Related choices share compact rows; the amount stays above the optional gifts. */
.sum-ticket-change [data-upgrade-choices] .ticket-choice-details summary{padding-block:5px;min-height:34px}
.sum-ticket-change [data-upgrade-choices] .ticket-choice > label{padding-bottom:4px}
.sum-ticket-change [data-upgrade-body]{gap:12px}
.sum-ticket-change .ticket-change-transition{font-size:22px;text-wrap:pretty}
.sum-ticket-change [data-upgrade-quote]:empty{display:none}

.sum-ticket-change .ticket-category-choice:only-child{grid-column:1 / -1}

/* Pending payment keeps the heading, short status and transition close together. */
.sum-ticket-change:has([data-upgrade-payment]:not([hidden])) .ticket-change-header{padding-bottom:0}
.sum-ticket-change:has([data-upgrade-payment]:not([hidden])) .ticket-change-body{padding-top:4px;gap:6px}

/* Legal terms are secondary to the amount, and links must be visible. */
.sum-ticket-change .ticket-change-quote > p.ticket-upgrade-legal { font-size:14px; line-height:1.5; }
.sum-ticket-change .ticket-upgrade-legal a { text-decoration:underline; text-underline-offset:3px; }