/* Album only. Keep the other two proposals available for comparison. */
#album-body{display:contents}
.mock-surface[data-proposal=album]>#album-body{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.mock-surface[data-proposal=album]{display:flex;flex-direction:column;--notification-surface:var(--paper);--album-nav-height:98px;--album-reward-size:76px;--paper:#faf5ff;--edge:#b7a4ca;--muted:#6c5b78;--album-ready-ink:#2458c6;--album-done-ink:#21734d;--album-pattern:url('/assets/succes-ui-finition-2026-10-16/pixels-clairs.svg')}
html[data-ui-theme=dark] .mock-surface[data-proposal=album]{--paper:#24282d;--edge:#454d58;--muted:#b8bdc8;--album-ready-ink:#67dfa3;--album-done-ink:#7be4ad;--album-pattern:url('/assets/succes-ui-finition-2026-10-16/pixels-sombres.svg')}
.mock-surface[data-proposal=album]>#album-body{background:var(--bg) var(--album-pattern) repeat}
.mock-surface[data-proposal=album]>.mock-banner{height:52px;flex:none;background:var(--cream)}
.mock-surface[data-proposal=album]>.mock-banner>span{display:none}
#album-navigation{flex:none;padding:13px 16px 0}
.album-overview{padding:0 4px 13px}
.album-overview>div:first-child{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:16px}
#album-percent{color:var(--ink);font-size:16px}
.album-track{height:7px;border-radius:6px;background:var(--track);overflow:hidden}
.album-track>span{display:block;height:100%;background:var(--mint);border-radius:inherit}
.album-overview .album-track{height:14px;border:2px solid var(--ink);border-radius:0;background:#d7cfd6}
.album-overview .album-track>span{background:var(--mint);border-radius:0}
html[data-ui-theme=dark] .album-overview .album-track{border-color:#42474d;background:#34383d}
.album-categories{display:flex;align-items:center;gap:3px;min-width:0;margin-inline:-9px}
.album-rail{display:flex;flex:1;min-width:0;gap:var(--album-category-gap,6px);overflow-x:auto;overflow-y:hidden;padding:5px 2px 8px;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;scroll-snap-type:x mandatory;scroll-padding-left:2px}
.album-rail::-webkit-scrollbar{display:none}
.mock-surface .album-category{position:relative;display:grid;place-items:center;flex:0 0 72px;width:72px;height:72px;border:2px solid transparent;border-radius:14px;scroll-snap-align:start;touch-action:pan-x;--notification-surface:var(--bg)}
.mock-surface .album-category[aria-selected=true]{--notification-surface:var(--active)}
.album-category .ach-icon{width:64px;height:64px}
/* Give stationary icons their own paint above the moving backdrop. WebKit's
   scrolling rail must not depend on focus/filter invalidation to paint them. */
.album-category{isolation:isolate}
.album-category .ach-icon{z-index:1;pointer-events:none}
.album-category .ach-icon img{position:relative;transform:translateZ(0);backface-visibility:hidden}
#album-category-title{margin:2px 4px 11px;font:22px/1.1 PixelUI,monospace;font-weight:400;text-transform:uppercase}
.mock-surface[data-proposal=album] .mock-scroll{flex:1;min-height:0;height:auto;padding:3px 16px 20px;background:transparent;scrollbar-gutter:stable;scrollbar-width:none}
.album-stable-grid{grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
.mock-surface .album-tile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--album-reward-size);align-items:center;gap:8px;width:100%;height:100px;min-width:0;padding:0 8px 0 4px;border:2px solid var(--edge);border-radius:5px;background:var(--paper);box-shadow:0 1px 0 var(--shadow);text-align:left;touch-action:manipulation;image-rendering:pixelated}
.mock-surface .album-open{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:8px;min-width:0;width:100%;height:100%;text-align:left;border-radius:3px}
.mock-surface .album-open:active{background:var(--active)}
.album-tile .ach-icon{width:96px;height:96px}
.album-card-copy{display:grid;gap:3px;min-width:0;max-height:96px;width:100%}
.album-tile strong{display:block;font:18px/19px PixelUI,monospace;font-weight:400;overflow-wrap:anywhere}
.album-objective{display:block;color:var(--muted);font:14px/15px PixelUI,monospace}
.album-card-progress{display:block;width:100%;font:14px/1 PixelUI,monospace}
.album-card-progress>.album-track,.album-detail-hero .album-track{position:relative;height:22px;border:1px solid var(--edge);border-radius:5px;background:var(--track);color:var(--ink)}
.album-track-label{position:absolute;inset:0;display:grid;place-items:center;font:14px/1 PixelUI,monospace;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-ui-theme=dark] :is(.album-card-progress,.album-detail-hero)>.album-track{background:#b3bac5;color:#1b1d1f;border-color:#6a737c}
.album-tile .pixel-notification-dot{top:4px;left:86px;right:auto}
/* A permanent reward slot: state changes never move the achievement or its bar. */
.mock-surface .album-reward-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:var(--album-reward-size);height:var(--album-reward-size);flex:none;padding:0;border:2px solid #a3a4af;border-radius:8px;background:#dddde4;box-shadow:0 2px 0 #a3a4af;color:#555562;opacity:1;touch-action:manipulation}
.album-reward-box>img{display:block;width:40px;height:40px;image-rendering:pixelated;pointer-events:none}
.album-reward-box .album-reward-amount{font:800 22px/24px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.album-reward-box[data-reward-wide=true] .album-reward-amount{font-size:18px}
.mock-surface .album-reward-box>.album-reward-check{position:absolute;left:50%;top:50%;width:36px;height:36px;transform:translate(-50%,-50%);z-index:1;pointer-events:none;visibility:hidden}
.album-reward-box[data-reward-state=claimed] .album-reward-check{visibility:visible}
.album-reward-box[data-reward-state=claimed]>:not(.album-reward-check){opacity:.22}
.album-receipt-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.album-finished{margin-top:16px}
.album-finished:first-child{margin-top:0}
.album-section-heading{margin:0 4px 11px;font:22px/1.1 PixelUI,monospace;font-weight:400;text-transform:uppercase}
.mock-surface .album-reward-box[data-reward-state=ready]{background:#80edb2;border-color:#287a51;box-shadow:0 2px 0 #287a51,inset 0 2px 0 #c9ffe3;color:#173e2a}
.mock-surface .album-reward-box[data-reward-state=ready]:active{background:#b0f7d2;box-shadow:0 2px 0 #287a51,inset 0 2px 0 #287a5130}
.mock-surface .album-reward-box:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
html[data-ui-theme=dark] .mock-surface .album-reward-box{background:#363c44;border-color:#59616c;box-shadow:0 2px 0 #151a21;color:#c4cbd3}
html[data-ui-theme=dark] .mock-surface .album-reward-box[data-reward-state=ready]{background:#59de98;border-color:#329d65;box-shadow:0 2px 0 #1b593a,inset 0 2px 0 #a6f8cb;color:#123721}
.album-detail-hero>.album-reward-box{margin-top:14px}
#album-rewards{flex:none;height:calc(var(--pass-toolbar-cover,var(--album-nav-height)) + var(--reward-action-gap) + var(--reward-action-height) + var(--reward-area-top));margin-bottom:0;padding:var(--reward-area-top) 16px calc(var(--pass-toolbar-cover,var(--album-nav-height)) + var(--reward-action-gap));background:var(--bg);border:0;display:grid;text-align:center}
html body #album-rewards .style-button{position:relative;--reward-action-outline:#a6d9c6;--reward-action-disabled-outline:#aaa3ad;width:100%;min-height:var(--reward-action-height);height:var(--reward-action-height);margin:0;padding:6px 12px;font:var(--pixelingo-standard-action-font);border-radius:14px}
html[data-ui-theme=dark] body #album-rewards .style-button{--reward-action-outline:#a6f8cb;--reward-action-disabled-outline:#51565b}
html body[data-home-navigation=v02] .mock-surface[data-proposal=album]>.main-navigation{height:var(--album-nav-height)!important;background:var(--bg)}
html body[data-home-navigation=v02] .mock-surface[data-proposal=album] .main-navigation .home-nav-dock{max-width:390px!important;inset:auto 0 10px!important;width:calc(100% - 24px)!important}
.mock-surface[data-proposal=album]>.mock-toast{bottom:calc(var(--album-nav-height) + 100px);z-index:100}

/* A full-height sheet inside the preview phone, including on desktop. */
.mock-surface .mock-dialog.album-detail{position:absolute;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;overflow:hidden;background:var(--bg);box-shadow:none;z-index:80}
.album-detail[open]{display:flex;flex-direction:column}
.album-detail-header{flex:none;height:66px;display:flex;align-items:center;justify-content:center;position:relative;background:var(--cream);border-bottom:1px solid var(--edge);padding:0 64px}
.album-detail-header h2{font:22px/1 PixelUI,monospace;text-transform:uppercase;font-weight:400;margin:0}
.mock-surface .album-detail .minimal-close{position:absolute;left:12px;top:11px;width:44px;height:44px;display:grid;place-items:center;padding:8px;border:0;background:transparent;box-shadow:none;cursor:pointer}
.album-detail .minimal-close img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated;pointer-events:none}
html[data-ui-theme=dark] .album-detail .minimal-close img{filter:brightness(0) invert(.9)}
.album-detail-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 16px 24px;background:var(--bg) var(--album-pattern) repeat;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:var(--edge) transparent}
.album-detail-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px 20px}
.album-detail-hero>.ach-icon{width:96px;height:96px}
.album-detail-hero h3{font:32px/1.1 UniversityActions,AchievementTitle,sans-serif;font-weight:400;margin:8px 0}
.album-detail-hero p{font:16px/20px PixelUI,monospace;margin:0;max-width:320px}
.album-detail-hero .album-track{width:100%;max-width:300px;height:26px;margin-top:12px}
.album-detail-scroll>h4{font:24px/1.1 UniversityActions,AchievementTitle,sans-serif;font-weight:400;margin:0 4px 10px}
.album-milestones{list-style:none;margin:0;padding:0;border:2px solid var(--edge);border-radius:5px;background:var(--paper);overflow:hidden;box-shadow:0 1px 0 var(--shadow)}
.album-milestones li{display:grid;grid-template-columns:24px minmax(0,1fr) var(--album-reward-size);align-items:center;column-gap:10px;min-height:92px;padding:8px 10px;border-bottom:1px solid var(--edge);min-width:0}
.album-milestones li:last-child{border-bottom:0}
.album-step-mark{display:grid;place-items:center;width:24px;height:26px;color:var(--muted)}
.album-step-mark::before{content:'';width:18px;height:18px;border:2px solid currentColor;border-radius:50%;box-sizing:border-box}
.album-milestones li[data-state=current] .album-step-mark::before{border-style:dashed}
.album-milestones li:is([data-state=earned],[data-state=ready]) .album-step-mark{color:var(--album-done-ink)}
.album-milestones li:is([data-state=earned],[data-state=ready]) .album-step-mark::before{width:10px;height:18px;border:0;border-right:3px solid currentColor;border-bottom:3px solid currentColor;border-radius:0;transform:translateY(-2px) rotate(42deg)}
.album-step-copy{display:grid;gap:2px;min-width:0}
.album-milestones strong{display:block;font:18px/20px PixelUI,monospace;font-weight:400;overflow-wrap:anywhere}
.album-milestones p{font:14px/16px PixelUI,monospace;color:var(--muted);margin:0}
.album-step-status{display:block;min-height:16px;font:13px/16px PixelUI,monospace;color:var(--muted)}
.album-milestones li[data-state=earned] .album-step-status{color:var(--album-done-ink)}
.album-milestones li[data-state=ready] .album-step-status{color:var(--album-ready-ink)}
.album-milestones li[data-state=future] .album-step-mark{opacity:.6}
.album-bonus{display:grid;grid-template-columns:minmax(0,1fr) var(--album-reward-size);align-items:center;gap:10px;margin-top:12px;padding:10px;border:2px solid var(--edge);border-radius:5px;background:var(--paper);box-shadow:0 1px 0 var(--shadow)}
.album-bonus strong{font:18px/20px PixelUI,monospace;font-weight:400}.album-bonus p{color:var(--muted);font:14px/16px PixelUI,monospace;margin:6px 0}.album-bonus>span{display:block;font:13px/16px PixelUI,monospace;min-height:16px;color:var(--muted)}
.album-bonus[data-state=earned] .album-step-status{color:var(--album-done-ink)}.album-bonus[data-state=ready] .album-step-status{color:var(--album-ready-ink)}
.album-detail-footer{height:80px;flex:none;display:grid;padding:10px 20px 16px;background:var(--bg);border-top:1px solid var(--edge);text-align:center}
html body .album-detail-footer .style-button{min-height:54px;height:54px;padding:8px 12px;width:100%;font:400 26px/1.1 UniversityActions,AchievementTitle,sans-serif}
@media(max-width:360px){.mock-surface[data-proposal=album]{--album-reward-size:64px}.album-reward-box .album-reward-amount{font-size:20px;line-height:20px}.album-reward-box[data-reward-wide=true] .album-reward-amount{font-size:15px}#album-navigation{padding-inline:12px}.mock-surface[data-proposal=album] .mock-scroll{padding-inline:8px}.mock-surface .album-tile{grid-template-columns:minmax(0,1fr) var(--album-reward-size);height:116px;padding-inline:4px;column-gap:4px}.album-card-copy{max-height:112px}.mock-surface .album-open{gap:4px}.album-tile strong{font-size:17px;line-height:18px}.album-detail-scroll{padding-inline:12px}.album-milestones li{grid-template-columns:20px minmax(0,1fr) var(--album-reward-size);padding-inline:8px;column-gap:8px}.album-bonus{grid-template-columns:minmax(0,1fr) var(--album-reward-size)}.album-detail-hero h3{font-size:30px}}
@media(max-height:680px){.mock-surface[data-proposal=album]>#album-body{display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.mock-surface[data-proposal=album] .mock-scroll{overflow:visible}}
@media(max-height:680px){.mock-surface[data-proposal=album]{--album-nav-height:85px}.mock-surface[data-proposal=album]>.mock-banner{height:42px}#album-navigation{padding-top:8px}.album-overview{padding-bottom:7px}.album-category .ach-icon{width:64px;height:64px}.mock-surface .album-category{height:68px;flex-basis:68px;width:68px}#album-category-title{margin-bottom:7px}.album-detail-header{height:56px}.album-detail .minimal-close{top:6px}.album-detail-footer{height:71px;padding-top:7px;padding-bottom:10px}}

/* Selection uses the dock's moving backdrop; rail edges remain stable. */
.album-rail{position:relative;isolation:isolate;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none}
.album-rail:is(.is-dragging,.is-coasting){scroll-snap-type:none}
.album-rail.is-dragging,.album-rail.is-dragging .album-category{cursor:grabbing}
.album-category-indicator{position:absolute;pointer-events:none;z-index:-1;box-sizing:border-box;border:2px solid var(--edge);border-radius:14px;background:var(--active);box-shadow:inset 0 1px 0 #ffffff70}
.mock-surface .album-rail .album-category[aria-selected=true]{background:transparent;border-color:transparent;box-shadow:none}
html[data-ui-theme=dark] .album-category-indicator{border-color:#697383;box-shadow:inset 0 1px 0 #ffffff12}