.diary { margin: 24px 0; padding: 24px; color: #333; background: #fff; line-height: 1.6; }
.diary h2, .diary h3 { margin: 0 0 12px; }
.diary p { margin: 12px 0; }
.diary-form fieldset { border: 0; padding: 0; margin: 16px 0; }
.diary button, .profile-page .diary-list button { padding: 10px 14px; cursor: pointer; }
.diary :focus-visible, .diary-list :focus-visible { outline: 3px solid #a40000; outline-offset: 3px; }
.diary-list { list-style: none; padding: 0; }
.diary-list li { border-bottom: 1px solid #ddd; padding: 16px 0; overflow-wrap: anywhere; }
.diary-list time { display: block; }

/* Scope panel styles above the match report's typography reset. */
.match-report .diary { padding: 0; overflow: hidden; border: 1px solid var(--match-line, #dedad5); border-radius: 14px; background: #fff; font-size: 13px; line-height: 1.6; }
.match-report .diary-body { padding: 20px; }
.match-report .diary .diary-note { margin: 12px 0 0; color: var(--match-muted, #6d6965); font-size: 11px; }
@media (max-width: 540px) {
    .match-report .diary-body { padding: 16px; }
}

.match-report .diary-question { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.match-report .diary-watch-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.match-report .diary-watch-buttons button, .match-report .diary-watch-buttons a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 18px; border: 1px solid var(--match-line); border-radius: 8px; background: var(--match-surface); color: var(--match-ink); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.match-report .diary-watch-buttons button:hover, .match-report .diary-watch-buttons a:hover { border-color: var(--match-red); background: #fff5f3; color: var(--match-red); }
.match-report .diary-watch-buttons svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.match-report .diary-form { margin: 0; }
.match-report .diary-form .diary-rating { margin: 18px 0 0; padding: 0; border: 0; }
.match-report .diary-rating legend { font-size: 14px; font-weight: 650; }
.match-report .diary-stars { display: flex; align-items: center; gap: 2px; width: fit-content; margin-inline: auto; }
.match-report .diary .diary-text-button { padding: 0; margin: 0; width: auto; display: inline; border: 0; background: none; color: var(--match-muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.match-report .diary-atmosphere, .match-report .diary-change { margin-top: 12px; font-size: 12px; color: var(--match-muted); }
.match-report .diary summary { cursor: pointer; }
.match-report .diary-change .diary-watch { margin-top: 10px; }
.match-report .diary .diary-feedback { margin: 8px 0 0; font-size: 12px; color: var(--match-muted); }
.match-report .diary-feedback:empty { display: none; }
.match-report .diary[aria-busy=true] button { opacity: .6; cursor: wait; }
@media (max-width: 540px) { .match-report .diary-watch-buttons > * { width: 100%; margin: 0; } }

.match-report .diary { border-radius: 10px; margin: 16px 0 24px; }
.match-report .diary-body { padding: 16px 20px; }
.match-report .diary-body > .match-report__kicker { margin-bottom: 10px; }
.match-report .diary-question { font-size: 15px; margin-bottom: 10px; }
.match-report .diary-watch-buttons button, .match-report .diary-watch-buttons a { min-height: 44px; padding: 9px 16px; }
@media (max-width: 540px) {
    .match-report .diary-watch-buttons { flex-wrap: nowrap; }
    .match-report .diary-watch-buttons > * { flex: 1; min-width: 0; width: auto; }
    .match-report .diary-watch-buttons button, .match-report .diary-watch-buttons a { padding: 9px 10px; }
}

/* Header control: preserve the scorecard's rounded artwork while allowing the menu to float. */
.match-report .match-scorecard:has(.diary-header) { overflow: visible; }
.match-report .match-scorecard:has(.diary-header)::before { border-radius: 16px 16px 0 0; }
.match-report .match-scorecard:has(.diary-header) .match-scorecard__hero { border-radius: inherit; overflow: hidden; }
.match-report .match-scorecard > .diary-header { z-index: 4; }
.match-report .diary-header { margin: 0; border: 0; border-top: 1px solid var(--match-line); border-radius: 0; background: transparent; overflow: visible; text-align: center; }
.match-report .diary-header .diary-body { padding: 14px 0; }
.match-report .diary-dropdown { display: inline-block; position: relative; text-align: left; }
.match-report .diary-dropdown > summary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 9px 16px; border: 1px solid var(--match-red); border-radius: 7px; background: var(--match-red); color: #fff; font-weight: 650; list-style: none; cursor: pointer; }
.match-report .diary-dropdown > summary::-webkit-details-marker { display: none; }
.match-report .diary-dropdown > summary:hover { background: var(--match-red-dark); }
.match-report .diary-dropdown--recorded > summary { background: #f1f1f1; border-color: #e3e3e3; color: var(--match-red); font-weight: 400; }
.match-report .diary-dropdown--recorded > summary:hover { background: #e7e7e7; }
.match-report .diary-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s; }
.match-report .diary-dropdown[open] .diary-chevron { transform: rotate(180deg); }
.match-report .diary-dropdown-menu { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; min-width: 100%; padding: 5px; background: #fff; border: 1px solid var(--match-line); border-radius: 8px; box-shadow: 0 8px 24px #19181724; }
.match-report .diary-dropdown-menu button, .match-report .diary-dropdown-menu a { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 4px; background: transparent; color: var(--match-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.match-report .diary-dropdown-menu button:hover, .match-report .diary-dropdown-menu a:hover { background: var(--match-surface); color: var(--match-red); }
.match-report .diary-dropdown-menu small { display: block; padding: 6px 10px; white-space: nowrap; color: var(--match-muted); font-size: 10px; }
.match-report .diary-header .diary-rating { width: fit-content; margin-inline: auto; }

.match-report .diary-dropdown-menu .diary-undo { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--match-line); }
.match-report .diary-dropdown-menu .diary-undo button { color: var(--match-red); }

/* Match the player-rating glyph, size and grey/gold palette. */
.match-report .diary-stars { gap: 0; }
.match-report .diary-stars .diary-star { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 32px; padding: 0; margin: 0; border: 0; background: transparent; font: 25px/1 Arial, sans-serif; color: #ccc; cursor: pointer; }
.match-report .diary-stars .diary-star.is-filled { color: #edb900; }
.match-report .diary-stars .diary-star:focus-visible { outline: 2px solid #8c2929; outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) {
    .match-report .diary-stars:has(.diary-star:hover) .diary-star { color: #edb900; }
    .match-report .diary-stars .diary-star:hover ~ .diary-star { color: #ccc; }
}
.match-report .diary-watch-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.match-report .diary-dropdown-menu button, .match-report .diary-dropdown-menu a { justify-content: flex-start; align-items: center; }
.match-report .diary-dropdown-menu button[aria-pressed=true] { background: var(--match-surface); color: var(--match-red); font-weight: 700; }

/* Save feedback stays on the header control; errors remain readable below it. */
.match-report .diary[aria-busy=true] .diary-dropdown > summary { position: relative; cursor: wait; pointer-events: none; }
.match-report .diary[aria-busy=true] .diary-chevron { visibility: hidden; }
.match-report .diary[aria-busy=true] .diary-dropdown > summary::after { content: ""; position: absolute; right: 16px; top: calc(50% - 7px); width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #ffffff60; border-top-color: #fff; border-radius: 50%; animation: diary-saving .7s linear infinite; }
.match-report .diary[aria-busy=true] .diary-dropdown--recorded > summary::after { border-color: #97000030; border-top-color: var(--match-red); }
.match-report .diary[data-saved=true] .diary-dropdown > summary { animation: diary-confirmed .8s ease-out; }
@keyframes diary-saving { to { transform: rotate(360deg); } }
@keyframes diary-confirmed { from { box-shadow: 0 0 0 4px #a4000030; } to { box-shadow: 0 0 0 0 #a4000000; } }
@media (prefers-reduced-motion: reduce) {
    .match-report .diary[aria-busy=true] .diary-dropdown > summary::after,
    .match-report .diary[data-saved=true] .diary-dropdown > summary { animation: none; }
}

.match-report .diary-dropdown > summary { min-height: 36px; padding: 7px 12px; gap: 7px; font-size: 12px; }
.match-report .diary-dropdown > summary .diary-watch-icon { width: 17px; height: 17px; flex-basis: 17px; }
.match-report .diary[aria-busy=true] .diary-dropdown > summary::after { right: 12px; }

/* Use available scorecard width, rather than viewport width: the page has sidebars. */
.match-report .match-scorecard { container: match-scorecard / inline-size; }
.match-report .match-scorecard__center { display: contents; }
.match-report .match-scorecard__center > .match-scorecard__result { grid-column: 2; grid-row: 1; }
.match-report .match-scorecard__teams > .match-team:first-child { grid-column: 1; grid-row: 1; }
.match-report .match-scorecard__teams > .match-team--away { grid-column: 3; grid-row: 1; }
.match-report .match-scorecard__teams:has(.diary-header) { z-index: 4; }
.match-report .match-scorecard__center > .diary-header { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.match-report .match-scorecard__center > .diary-header .diary-body { padding-bottom: 0; }
@container match-scorecard (min-width: 600px) {
    .match-report .match-scorecard__teams:has(.diary-header) { grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr); }
    .match-report .match-scorecard__center { display: contents; }
    .match-report .match-scorecard__center > .diary-header { grid-column: 2; grid-row: 2; border-top: 0; margin-top: 0; }
    .match-report .match-scorecard__center > .diary-header .diary-body { padding-top: 4px; }
}

/* Keep the result and both teams in the same grid row; controls occupy the next row. */
.match-report .diary-form .diary-rating { margin-top: 6px; }
.match-report .diary-rating legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.match-report .diary-rating-row { display: grid; grid-template-columns: 52px 125px 24px; align-items: center; gap: 6px; }
.match-report .diary-rating-label { text-align: left; color: var(--match-muted); font-size: 12px; font-weight: 600; }
.match-report .diary .diary-clear { width: 24px; height: 32px; padding: 0; border: 0; background: none; color: var(--match-muted); font: 18px/1 Arial, sans-serif; cursor: pointer; }
.match-report .diary .diary-clear:hover { color: var(--match-red); }

/* Share rows between team identities and the center controls. */
@container match-scorecard (min-width: 600px) {
    .match-report .match-scorecard__teams { row-gap: 4px; }
    .match-report .match-scorecard__teams > .match-team { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 3; justify-items: center; }
    .match-report .match-team__crest { grid-row: 1; }
    .match-report .match-scorecard__teams .match-team h1 { grid-row: 2; align-self: start; margin-top: 6px; }
    .match-report .match-scorecard__teams .match-team__role { grid-row: 3; align-self: start; margin-top: 0; }
    .match-report .match-scorecard__center > .diary-header { grid-row: 2 / span 2; align-self: start; }
    .match-report .match-scorecard__center > .diary-header .diary-body { padding-top: 0; }
}

.match-report .diary-header-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }
.match-report .diary-rating-menu { position: relative; text-align: left; }
.match-report .diary-rating-trigger { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--match-line); border-radius: 7px; background: #fff; color: #888; font: 24px/1 Arial, sans-serif; list-style: none; cursor: pointer; }
.match-report .diary-rating-trigger::-webkit-details-marker { display: none; }
.match-report .diary-rating-trigger:hover, .match-report .diary-rating-trigger.is-rated { color: #edb900; border-color: #d9bd64; }
.match-report .diary-rating-popover { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; padding: 12px 16px; border: 1px solid var(--match-line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #19181724; }
.match-report .diary-rating-popover .diary-rating { margin: 0; }
.match-report .diary-rating-popover .diary-form + .diary-form { margin-top: 4px; }
@container match-scorecard (min-width: 600px) {
    .match-report .match-scorecard__teams:has(.diary-header) { grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr); }
}

.match-report .diary-inline-rating { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 5px; }
.match-report .diary-inline-rating > .diary-form .diary-rating { margin: 0; }
.match-report .diary-inline-rating .diary-rating-trigger { width: 28px; height: 32px; border: 0; background: transparent; color: var(--match-muted); font-size: 22px; }
.match-report .diary-inline-rating .diary-rating-trigger:hover { color: var(--match-red); background: var(--match-surface); }
@container match-scorecard (min-width: 600px) {
    .match-report .match-scorecard__teams > .match-team:first-child,
    .match-report .match-scorecard__teams > .match-team--away { grid-row: 1 / span 3; }
}

.match-report .diary-rating-row--match { display: block; position: relative; }
.match-report .diary-rating-row--match > .diary-clear { position: absolute; left: calc(100% + 4px); top: 0; }
.match-report .diary-inline-rating { position: relative; width: fit-content; margin-inline: auto; }
.match-report .diary-inline-rating > .diary-rating-menu { position: absolute; left: calc(100% + 30px); top: 0; }