/* Shared learning and publishing experience. Uses the established Galeri Media palette. */
:root { --gm-experience-border: #d8e4f5; --gm-experience-muted: #526486; --gm-experience-ink: #14264e; }
[hidden] { display: none !important; }
.gm-public-shell :is(.gm-topbar-inner,.gm-nav,.gm-topbar-actions) { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.gm-public-shell :is(.gm-nav,.gm-topbar-actions) > * { min-width: 0; max-width: 100%; }
.gm-wizard-panel, .gm-stats-surface, .gm-detail-reading > *, .gm-detail-overview { min-width: 0; }
.gm-wizard-panel { display: grid; gap: 20px; padding: 24px 0; }
.gm-wizard-panel > h3 { margin: 0; color: var(--gm-experience-ink); font-size: 1.25rem; }
.gm-wizard-panel h3:focus { outline-offset: 6px; }
.gm-wizard-panel :is(input,select,textarea) { max-width: 100%; }
.gm-wizard-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gm-experience-border); }
.gm-wizard-steps button { display: flex; align-items: center; gap: 10px; min-height: 58px; border: 0; border-radius: 10px; padding: 12px; background: #f1f5fc; color: #3c5276; font: inherit; text-align: left; cursor: pointer; }
.gm-wizard-steps button > span { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; font-weight: 700; }
.gm-wizard-steps button[aria-current] { background: #e5eeff; color: #124aca; box-shadow: inset 0 -3px #1656dc; }
.gm-wizard-steps button:disabled { cursor: default; opacity: .65; }
.gm-wizard-navigation { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--gm-experience-border); }
.gm-wizard-navigation button { min-height: 44px; }
.gm-wizard-panel [data-wizard-review] { display: grid; gap: 16px; }
[data-wizard-review] article { border: 1px solid var(--gm-experience-border); border-radius: 12px; padding: 20px; background: #f8faff; }
[data-wizard-review] :is(p,h4) { margin: 0 0 10px; overflow-wrap: anywhere; white-space: pre-line; }
.gm-draft-save-status { color: var(--gm-experience-muted); margin: 0; }
.gm-draft-save { justify-self: start; }
.gm-draft-files { display: grid; gap: 6px; padding-left: 20px; overflow-wrap: anywhere; }
.gm-submission-drafts { margin-block: 20px; scroll-margin-top: 100px; }
.gm-submission-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px; }
.gm-submission-tabs a { padding: 12px 20px; min-height: 44px; border-radius: 10px; border: 1px solid #cbdcf5; color: #174fae; background: #fff; }
.gm-submission-tabs a[aria-current] { background: #1656dc; color: #fff; border-color: #1656dc; }
.gm-draft-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--gm-experience-border); padding: 18px 0; }
.gm-draft-card h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.gm-draft-card form { margin: 0; }
.gm-pengguna-submissions-page .gm-pengguna-hero { min-height: 0; padding-block: 20px; }
.gm-pengguna-submissions-page .gm-pengguna-hero-chip { display: none; }
.gm-pengguna-submissions-page .gm-pengguna-hero-panel { background: transparent; border: 0; box-shadow: none; }
.gm-stem-field { display: grid; gap: 16px; padding: 20px; border: 1px solid #bedaca; background: #f4fbf7; border-radius: 12px; }
.gm-stem-option { display: flex; align-items: flex-start; gap: 12px; }
.gm-stem-option input, .gm-stem-disciplines input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: #1656dc; }
.gm-stem-option small, .gm-stem-disciplines small { display: block; margin-top: 5px; font-weight: 400; line-height: 1.6; color: #3f6257; }
.gm-stem-disciplines { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 0; border: 0; margin: 0 0 16px; }
.gm-stem-disciplines legend { font-weight: 700; padding-bottom: 8px; }
.gm-stem-disciplines > p { grid-column: 1 / -1; }
.gm-stem-disciplines > label { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #d4e7dd; border-radius: 10px; padding: 14px; margin: 0; }
.gm-stem-field details { margin-top: 12px; }
.gm-stem-field summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
.gm-stem-field textarea { background: #fff; }
.gm-stem-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.gm-stem-tags li { padding: 6px 12px; color: #21614a; background: #edf8f1; border-radius: 8px; }
.gm-preserve-lines { white-space: pre-line; overflow-wrap: anywhere; }

/* Statistics uses HTML bars and an SVG trend; the tables remain available without JavaScript. */
.gm-public-shell .gm-stats-redesign { padding-top: 32px; }
.gm-stats-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 24px; }
.gm-stats-heading h1 { font-size: clamp(1.75rem,3vw,2.25rem); margin: 6px 0 10px; }
.gm-stats-heading p { margin: 0; max-width: 65ch; color: var(--gm-experience-muted); }
.gm-stats-updated { font-size: .875rem; flex-shrink: 0; }
.gm-stats-updated strong { display: block; color: var(--gm-experience-ink); }
.gm-stats-redesign .gm-stats-tabs { margin: 0 0 24px; }
.gm-stats-period { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-bottom: 24px; padding: 20px; border: 1px solid var(--gm-experience-border); background: #edf3ff; border-radius: 14px; }
.gm-stats-period > div { margin-right: auto; }
.gm-stats-period p { margin: 4px 0 0; color: var(--gm-experience-muted); }
.gm-stats-period nav { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-stats-period nav [aria-current] { background: #1656dc; color: #fff; }
.gm-stats-period details { flex-basis: 100%; }
.gm-stats-period summary { cursor: pointer; min-height: 44px; padding-top: 10px; }
.gm-stats-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.gm-stats-summary-grid.has-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gm-stats-summary-card { border: 1px solid var(--gm-experience-border); border-radius: 14px; padding: 22px; background: #fff; }
.gm-stats-summary-card h2 { font-size: .9375rem; margin: 0 0 12px; line-height: 1.5; color: #40557b; font-family: inherit; }
.gm-stats-summary-card > strong { display: block; font-size: clamp(1.75rem,2.8vw,2.25rem); color: #10398a; font-variant-numeric: tabular-nums; }
.gm-stats-summary-card p { margin: 8px 0 0; font-size: .875rem; color: var(--gm-experience-muted); line-height: 1.6; }
.gm-stats-surface { padding: 24px; border: 1px solid var(--gm-experience-border); border-radius: 16px; background: #fff; margin-bottom: 24px; }
.gm-stats-surface h2 { font-size: 1.25rem; margin: 0 0 8px; }
.gm-stats-surface h3 { font-size: 1rem; margin-top: 24px; }
.gm-stats-surface p { color: var(--gm-experience-muted); line-height: 1.7; margin: 0 0 16px; }
.gm-stats-panel-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gm-stats-panel-heading > div { flex: 1 1 300px; }
.gm-stats-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.gm-stats-controls label { display: grid; gap: 6px; font-weight: 600; font-size: .875rem; }
.gm-stats-controls :is(select,input) { min-height: 44px; border: 1px solid #b9cbe6; padding: 9px 12px; background: #fff; color: var(--gm-experience-ink); border-radius: 8px; font: inherit; max-width: 100%; }
.gm-stats-redesign .gm-stats-bars { display: grid; gap: 20px; padding: 8px 0 0; margin: 0 0 24px; list-style: none; }
.gm-stats-redesign .gm-stats-bars li > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 7px; }
.gm-stats-bars :is(a,span) { overflow-wrap: anywhere; }
.gm-stats-bars strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-stats-redesign .gm-stats-bar-track { display: block; height: 10px; border-radius: 10px; overflow: hidden; background: #edf2fa; }
.gm-stats-redesign .gm-stats-bar-track > span { display: block; height: 100%; border-radius: inherit; background: #2861dc; }
.gm-stats-redesign .gm-stats-full-distribution summary, .gm-stats-more > summary, .gm-stats-methodology > summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-weight: 600; }
.gm-stats-redesign table { width: 100%; border-collapse: collapse; margin-top: 12px; table-layout: fixed; }
.gm-stats-redesign caption { text-align: left; padding-bottom: 12px; font-weight: 600; }
.gm-stats-redesign :is(th,td) { border-bottom: 1px solid #e4ebf6; padding: 12px; text-align: left; overflow-wrap: anywhere; }
.gm-stats-redesign :is(th,td):last-child { width: 26%; text-align: right; font-variant-numeric: tabular-nums; }
.gm-stats-trend svg { display: block; width: 100%; max-height: 280px; margin: 20px 0; overflow: visible; }
.gm-stats-trend text { fill: #526486; font: 13px sans-serif; }
.gm-trend-chart { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; margin: 28px 0 20px; }
.gm-stats-trend .gm-trend-plot { width: 100%; height: 220px; max-height: none; margin: 0; }
.gm-trend-y-axis { display: flex; flex-direction: column; justify-content: space-between; text-align: right; color: #526486; font-size: .8125rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gm-trend-x-axis { display: flex; justify-content: space-between; gap: 12px; grid-column: 2; color: #526486; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.gm-trend-x-axis.has-one { justify-content: center; }
.gm-stats-rankings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.gm-stats-ranking-list { counter-reset: rank; margin: 0; padding: 0; list-style: none; }
.gm-stats-ranking-list li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid #e4ebf6; counter-increment: rank; }
.gm-stats-ranking-list li::before { content: counter(rank); min-width: 24px; color: #687d9e; font-variant-numeric: tabular-nums; }
.gm-stats-ranking-list .gm-ranking-empty::before { content: none; }
.gm-stats-ranking-list li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gm-stats-ranking-list li > strong { text-align: right; color: #17499f; font-variant-numeric: tabular-nums; }
.gm-stats-ranking-list small { display: block; font-size: .8125rem; margin-top: 6px; color: var(--gm-experience-muted); font-weight: 400; }
.gm-stats-facts { display: grid; gap: 16px; }
.gm-stats-facts > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e4ebf6; padding-bottom: 12px; }
.gm-stats-facts dd { margin: 0; font-weight: 700; }

/* A shared grid aligns the preview/related row and the reading/information row. */
.gm-public-shell .gm-detail-content-grid.gm-detail-restored { grid-template-columns: minmax(0,2fr) minmax(0,1fr); grid-template-areas: "player related" "reading information"; }
.gm-public-shell .gm-detail-hero h1 { overflow-wrap: anywhere; }
.gm-public-shell .gm-detail-restored > .gm-player-wrap { grid-area: player; }
.gm-public-shell .gm-detail-restored > .gm-detail-reading { grid-area: reading; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.gm-public-shell .gm-detail-restored .gm-detail-reading > * { order: 0; margin: 0; min-width: 0; }
.gm-public-shell .gm-detail-restored .gm-detail-description { align-self: stretch; }
.gm-public-shell .gm-detail-restored > .gm-detail-metadata { grid-area: information; align-self: start; }
.gm-public-shell .gm-detail-restored > .gm-detail-side { grid-area: related; min-height: 0; align-self: stretch; }
.gm-public-shell .gm-detail-restored > .gm-detail-side.is-empty { align-self: start; }
.gm-public-shell .gm-detail-restored .gm-related-head { flex: 0 0 auto; margin-bottom: 12px; }
.gm-public-shell .gm-detail-restored .gm-related-list { flex: initial; min-height: 0; grid-auto-rows: auto; }
.gm-public-shell .gm-detail-restored .gm-detail-side[data-related-count="3"] .gm-related-list { flex: 1; grid-auto-rows: minmax(0,1fr); }
.gm-public-shell .gm-detail-restored .gm-related-item { min-height: 0; grid-template-columns: clamp(88px,8vw,112px) minmax(0,1fr); gap: 10px; padding: 8px; }
.gm-public-shell .gm-detail-restored .gm-related-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.gm-public-shell .gm-detail-restored .gm-related-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gm-public-shell .gm-detail-restored .gm-related-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-public-shell .gm-detail-reading > :is(.gm-detail-guidance,.gm-detail-stem) { padding: 22px; background: #fff; border: 1px solid #dce8ff; border-radius: 20px; box-shadow: var(--shadow-soft); }
.gm-detail-reading > :is(.gm-detail-guidance,.gm-detail-stem) h2 { margin: 0 0 16px; font-size: 23px; }
.gm-detail-reading .gm-preserve-lines { line-height: 1.8; overflow-wrap: anywhere; }
.gm-public-shell .gm-detail-restored .gm-detail-metadata .gm-metadata-cards { grid-template-columns: minmax(0,1fr); }
.gm-public-shell .gm-detail-restored .gm-metadata-cards > .gm-metadata-targets { display: block; scroll-margin-top: 110px; }
.gm-public-shell .gm-detail-hero-side .gm-rating-summary-card > .gm-rating-value.is-numeric { font-size: clamp(1.4rem,2.5vw,2.5rem); }
.gm-public-shell .gm-detail-hero-side .gm-rating-summary-card > .gm-rating-value.is-empty,
.gm-public-shell .gm-review-summary-value.is-empty { font-size: 16px; font-weight: 500; line-height: 1.5; }
.gm-public-shell .gm-metadata-targets > dt { font-size: 14px; font-weight: 600; color: #10264d; }
.gm-public-shell .gm-metadata-targets .gm-target-count { margin: 4px 0 12px; color: #526888; font-size: 14px; font-weight: 400; }
.gm-target-inline-group { padding: 12px 0; border-top: 1px solid #e1ebff; overflow-wrap: anywhere; }
.gm-public-shell .gm-target-inline-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0 0 6px; }
.gm-target-level-badge { display: inline-block; border-radius: 6px; background: #e8f1ff; color: #174fae; padding: 3px 8px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.gm-target-inline-classes { font-size: 14px; font-weight: 400; line-height: 1.6; }
.gm-public-shell .gm-target-inline-subjects { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; }
.gm-target-subject-label { color: #526888; }
.gm-target-more > summary { min-height: 44px; padding: 10px 0; color: #174fae; cursor: pointer; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.gm-target-more:not([open]) .gm-target-show-less, .gm-target-more[open] .gm-target-show-all { display: none; }
.gm-target-more > summary:focus-visible { outline: 3px solid #2763de; outline-offset: 3px; border-radius: 4px; }
.gm-public-shell .gm-player-poster-actions .gm-player-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: auto; height: auto; min-height: 52px; padding: 12px 22px; border-radius: 12px; background: #1656dc; font: inherit; font-weight: 700; color: #fff; }
.gm-player-primary svg { width: 24px; height: 24px; }
.gm-stem-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.gm-stem-declaration { color: #3f6257; font-size: .875rem; }
.gm-public-shell .gm-review-section .gm-review-layout { grid-template-columns: minmax(200px,1fr) minmax(0,2.5fr); }
.gm-public-shell .gm-review-section { margin-top: 24px; }
.gm-public-shell .gm-review-summary { align-self: start; }
:is(.gm-wizard-steps button,.gm-wizard-panel button,.gm-stats-redesign a,.gm-stats-redesign select,.gm-stem-field input):focus-visible { outline: 3px solid #2763de; outline-offset: 3px; }

@media (max-width: 1023px) {
    .gm-stats-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gm-public-shell .gm-detail-content-grid.gm-detail-restored { grid-template-columns: minmax(0,1fr); grid-template-areas: "player" "reading" "information" "related"; }
    .gm-public-shell .gm-detail-restored > :is(.gm-player-wrap,.gm-detail-reading,.gm-detail-metadata,.gm-detail-side) { order: 0; }
    .gm-public-shell .gm-detail-restored .gm-detail-side[data-related-count] .gm-related-list { flex: initial; grid-auto-rows: auto; }
    .gm-wizard-steps button { flex-direction: column; align-items: flex-start; font-size: .875rem; }
}
@media (max-width: 767px) {
    .gm-wizard-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .gm-wizard-steps button { flex-direction: row; align-items: center; padding: 10px; }
    .gm-wizard-panel { padding: 18px 0; }
    .gm-wizard-navigation { position: sticky; bottom: 0; z-index: 5; background: #fff; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
    form[data-media-wizard] { padding-bottom: 20px; }
    form[data-media-wizard] :is(input,select,textarea) { font-size: 16px; }
    .gm-stem-field { padding: 16px; }
    .gm-stem-disciplines { grid-template-columns: 1fr; }
    .gm-draft-card { align-items: flex-start; flex-direction: column; }
    .gm-stats-heading { display: block; }
    .gm-stats-updated { margin-top: 16px !important; }
    .gm-stats-updated strong { display: inline; margin-left: 8px; }
    .gm-stats-summary-grid.has-three { grid-template-columns: 1fr; }
    .gm-stats-summary-card { padding: 16px; }
    .gm-stats-summary-card h2 { font-size: .875rem; }
    .gm-stats-surface { padding: 18px; }
    .gm-stats-trend .gm-trend-plot { height: 180px; }
    .gm-stats-rankings { grid-template-columns: 1fr; gap: 0; }
    .gm-stats-controls { width: 100%; }
    .gm-stats-controls label { flex: 1 1 140px; min-width: 0; }
    .gm-stats-controls select { width: 100%; }
    .gm-stats-period { padding: 16px; }
    .gm-stats-redesign :is(select,input) { font-size: 16px; }
    .gm-public-shell .gm-detail-reading > :is(.gm-detail-guidance,.gm-detail-stem) { padding: 18px; }
    .gm-public-shell .gm-review-section .gm-review-layout { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .gm-wizard-panel, .gm-stats-redesign * { scroll-behavior: auto !important; } }