/* Album CSS additions that cannot land in main.css via MCP due to file size.
   Linked from dashboard.html after main.css. */

/* ----- Loading state ----- */

.album-loading {
  position:   fixed;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  font-size:  16px;
  padding:    0;
  text-align: center;
}

.alb-mobile-page--overview { padding-top: 24px; }
.alb-mobile-page--overview .alb-page-title { margin-bottom: 24px; }

/* ----- Unlocked card text size ----- */

.alb-card-name--unlocked {
  font-size: 14px;
}

.alb-card-desc--unlocked {
  font-size: 12px;
}

/* ----- Requested locked card sage wash ----- */

.alb-card--locked.alb-card--requested,
.alb-card--locked.alb-card--requested:hover,
.alb-card--locked.alb-card--requested:active {
  box-shadow: inset 0 0 0 0.5px rgba(46, 61, 58, 0.15), inset 0 0 0 2px var(--sage);
}

/* ----- Achievement wrap spacing ----- */

.alb-ach-wrap { gap: 4px; }

/* ----- Achievement celebration ----- */

@keyframes alb-confetti-burst {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(180deg); opacity: 0; }
}

.alb-confetti-dot {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: alb-confetti-burst 700ms ease-out forwards;
}

@keyframes alb-shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6px); }
  30%  { transform: translateX(6px); }
  45%  { transform: translateX(-4px); }
  60%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
  90%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

.alb-shake {
  animation: alb-shake 400ms ease forwards;
}

@keyframes alb-ach-name-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alb-ach-name--reveal {
  animation: alb-ach-name-reveal 400ms ease 200ms both;
}

/* ----- Achievement row mobile layout ----- */

@media (max-width: 900px) {
  .alb-ach-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 16px;
    column-gap: 8px;
    justify-items: center;
  }

  .alb-ach-circle {
    width: 48px;
    height: 48px;
  }

  .alb-mobile-page {
    overflow-y: auto;
  }
}

/* ----- Ribbon ----- */

.alb-card {
  position: relative;
  overflow: hidden;
}

.alb-ribbon {
  position:                absolute;
  top:                     14px;
  right:                   -22px;
  width:                   90px;
  padding:                 3px 0;
  background:              var(--ribbon-colour, #c4896a);
  color:                   #f4f7f5;
  font-family:             var(--sans);
  font-size:               9px;
  font-weight:             500;
  letter-spacing:          0.12em;
  -webkit-font-smoothing:  antialiased;
  text-align:     center;
  transform:      rotate(45deg);
  transform-origin: center;
  pointer-events: none;
  z-index:        2;
}

.alb-ribbon--coming      { background: #2e3d3a; color: #f4f7f5; }
.alb-ribbon--new         { background: #c4896a; color: #f4f7f5; }
.alb-ribbon--updated     { background: #c4896a; color: #f4f7f5; }
.alb-ribbon--leaving-soon{ background: #b56e6e; color: #f4f7f5; }

.alb-ribbon--boss {
  width: 90px;
  top:   14px;
  right: -22px;
}

/* ----- Boss mode card title wrapping ----- */

.alb-card--boss .alb-card-name {
  max-width: 82%;
}

/* ----- Locked card layout ----- */

/* ----- Card container grid ----- */

.alb-card {
  display:                  grid;
  grid-template-rows:       auto 1fr auto;
  row-gap:                  12px;
  box-shadow:               inset 0 0 0 0.5px rgba(46, 61, 58, 0.15);
  -webkit-font-smoothing:   antialiased;
}

.alb-card--locked {
  cursor: default;
}

.alb-card--locked:hover,
.alb-card--locked:active {
  transform:  none;
  box-shadow: inset 0 0 0 0.5px rgba(46, 61, 58, 0.15);
}

.alb-card-lower {
  align-self: start;
}

.alb-card--unlocked .alb-card-lower {
  align-self: end;
}

/* ----- Notification line ----- */

.alb-card-notify {
  display:              flex;
  align-items:          center;
  justify-content:      center;
  font-family:          var(--sans);
  font-size:            12px;
  font-weight:          300;
  color:                rgba(46, 61, 58, 0.55);
  text-decoration:      underline;
  text-underline-offset: 2px;
  text-align:           center;
  padding:              0;
  min-height:           44px;
  line-height:          1;
}

.alb-card-notify--done {
  color: var(--sage);
}

/* ----- Card upper (centered column for title + category) ----- */

.alb-card-upper {
  flex-direction: column;
  gap:            4px;
}

/* ----- Category label (overview only) ----- */

.alb-card-cat-label {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    500;
  color:          #7a5c3a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align:     center;
  margin:         4px 0 0;
  line-height:    1;
  padding:        0;
}

.alb-sticker--just-for-fun .alb-card-cat-label,
.alb-sticker--thinking .alb-card-cat-label,
.alb-sticker--deciding .alb-card-cat-label,
.alb-sticker--language .alb-card-cat-label,
.alb-sticker--systems .alb-card-cat-label,
.alb-sticker--building .alb-card-cat-label {
  color: rgba(255, 255, 255, 0.85);
}

/* ----- Overview card dump ----- */

.alb-overview-dump {
  margin-top: 32px;
}

.alb-overview-dump-label {
  font-family:    var(--sans);
  font-size:      10px;
  font-weight:    500;
  color:          rgba(46, 61, 58, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin:         0 0 16px;
}

/* ----- Thing grid — three-up desktop (overrides main.css four-column default) ----- */

.alb-grid {
  grid-template-columns: repeat(3, 1fr);
}

.alb-overview-dump-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
}

@media (max-width: 900px) {
  .alb-overview-dump-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ----- Body anchor for skin toggle ----- */

/* (no body position override needed — skin toggle uses position: fixed) */

/* ----- Nav layout: sign-in/out left, right side empty for skin toggle ----- */

.nav { justify-content: flex-start; }
.nav-wordmark { margin-right: 0; }
.nav-actions { margin-left: 0; }

/* ----- Tool-page skin toggle: nudge right on mobile -----
   .nav-wordmark's margin-right: auto (main.css) already pins .nav-actions
   to the right edge of the flex row; only the nav's own right padding sits
   between the toggle and the viewport edge. Position tweak only, the
   toggle itself is untouched. Lands on every tool page that uses the
   nav--thing header, which is intended. */
@media (max-width: 600px) {
  .nav--thing { padding-right: 12px; }
}

/* ----- Boss Mode footer trigger ----- */

@media (min-width: 901px) {
  .site-footer { position: relative; }
  #boss-mode-trigger {
    position:  absolute;
    right:     24px;
    top:       50%;
    transform: translateY(-50%);
  }
}

#boss-mode-trigger,
.alb-mobile-boss-trigger {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--mist);
  opacity:        0.85;
  cursor:         pointer;
  transition:     opacity 0.2s, color 0.2s;
  user-select:    none;
}

#boss-mode-trigger:hover,
.alb-mobile-boss-trigger:hover { opacity: 1; color: var(--white); }

.alb-mobile-boss-trigger {
  display:    block;
  margin-top: 6px;
}

.alb-mobile-signout {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--mist);
  cursor:         pointer;
  display:        block;
  margin-top:     8px;
  user-select:    none;
  transition:     opacity 0.2s, color 0.2s;
  opacity:        0.85;
}

.alb-mobile-signout:hover { opacity: 1; color: var(--white); }

/* ----- Skin toggle ----- */

.skin-toggle {
  position:    fixed;
  top:         22px;
  right:       32px;
  z-index:     60;
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
}

.toggle-label {
  font-family:    var(--sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:     color 0.3s;
  user-select:    none;
  opacity:        0.9;
}

.toggle-label--left  { color: var(--sage); }
.toggle-label--right { color: var(--slate-muted); }

@media (max-width: 600px) {
  .skin-toggle { top: 18px; right: 20px; }
}

.toggle-track {
  width:         56px;
  height:        28px;
  border-radius: 14px;
  border:        1.5px solid var(--sage);
  background:    rgba(92,138,122,0.12);
  position:      relative;
  cursor:        pointer;
  transition:    border-radius 0.35s cubic-bezier(0.4,0,0.2,1),
                 border-color  0.35s cubic-bezier(0.4,0,0.2,1),
                 background    0.35s cubic-bezier(0.4,0,0.2,1);
}

.toggle-thumb {
  position:      absolute;
  top:           3px;
  left:          3px;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  background:    var(--sage);
  box-shadow:    0 1px 5px rgba(0,0,0,0.45);
  transition:    left          0.35s cubic-bezier(0.4,0,0.2,1),
                 border-radius 0.35s cubic-bezier(0.4,0,0.2,1),
                 background    0.35s cubic-bezier(0.4,0,0.2,1),
                 transform     0.18s ease;
}

.toggle-track:hover .toggle-thumb { transform: scale(1.08); }

.toggle-track.is-office {
  border-radius: 5px;
  border-color:  var(--amber);
  background:    rgba(181,133,58,0.10);
}

.toggle-track.is-office .toggle-thumb {
  left:          calc(100% - 23px);
  border-radius: 3px;
  background:    var(--amber);
}

/* ----- Dashboard body background (prevents off-white seam at viewport bottom) ----- */

/* Workshop (default). Cream body. */
body.is-dashboard {
  background: var(--off-white);
}

/* Office. Slate body. */
body.is-dashboard.skin-office {
  background: var(--office-bg);
}

/* === OFFICE SKIN === */

body.skin-office {
  --office-bg:          #253330;
  --office-card-bg:     #f8f9f7;
  --office-card-locked-bg: #f0f2ee;
  --office-rule:        rgba(248,249,247,0.07);
  --office-rule-cream:  rgba(46,61,58,0.10);
  --office-mist:        #8aa6a0;
  background:           var(--office-bg);
}

body.skin-office .alb-wrap { background: var(--office-bg); }

body.skin-office .nav {
  background:    var(--office-bg);
  border-top:    2px solid var(--amber);
  border-bottom: 1px solid var(--office-rule);
}

body.skin-office .alb-tabs {
  background:    var(--office-bg);
  border-bottom: 1px solid var(--office-rule);
}

body.skin-office .alb-tab { color: var(--office-mist); }
body.skin-office .alb-tab.is-active { color: var(--off-white); }

body.skin-office .alb-tab.is-active::after {
  background: var(--amber);
}

body.skin-office .footer.site-footer {
  background:    var(--office-bg);
  border-top:    1px solid var(--office-rule);
}

body.skin-office .site-footer-link {
  color:             var(--office-mist);
  border-bottom-color: rgba(138, 166, 160, 0.3);
}
body.skin-office .site-footer-link:hover {
  color:             var(--off-white);
  border-bottom-color: var(--office-mist);
}

/* ----- Office skin entry header ----- */

.office-entry {
  margin-bottom:  36px;
  padding-bottom: 28px;
  border-bottom:  1px solid var(--office-rule);
}

.office-entry-wordmark {
  font-family:    var(--serif);
  font-weight:    700;
  font-size:      32px;
  letter-spacing: -0.025em;
  line-height:    1;
  color:          var(--off-white);
  margin-bottom:  10px;
}

.office-entry-tagline {
  font-size:   13px;
  font-weight: 300;
  color:       var(--office-mist);
  line-height: 1.6;
}

.office-placeholder {
  font-size:   12px;
  font-weight: 300;
  color:       var(--office-mist);
  opacity:     0.5;
  padding:     40px 0;
  text-align:  center;
}

/* ----- Office domain section (overview only) ----- */

.office-domain-section {
  margin-bottom: 40px;
}

.office-domain-label {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--amber);
  margin:         0 0 16px;
}

/* ----- Office card grid ----- */

.office-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   14px;
}

@media (max-width: 900px) {
  .office-domain-label { display: none; }

  .office-domain-section { margin-top: 32px; }
  .office-domain-section:first-of-type { margin-top: 0; }
}

/* ----- Office card ----- */

.office-card {
  background:    var(--office-card-bg);
  border-radius: 6px;
  padding:       20px 18px 16px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
}

.office-card--link {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.office-card--link:hover {
  transform:  translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.office-card-moment {
  font-family:    var(--sans);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--amber);
  margin:         0;
  line-height:    1;
}

.office-card-name {
  font-family:  var(--serif);
  font-size:    18px;
  font-weight:  700;
  color:        #253330;
  margin:       0;
  line-height:  1.2;
  letter-spacing: -0.02em;
}

.office-card-desc {
  font-family:  var(--sans);
  font-size:    12px;
  font-weight:  300;
  color:        rgba(46, 61, 58, 0.75);
  margin:       0;
  line-height:  1.5;
  flex:         1;
}

.office-card-wince {
  font-family:    var(--sans);
  font-size:      11px;
  font-weight:    300;
  font-style:     italic;
  color:          rgba(46, 61, 58, 0.45);
  margin:         4px 0 0;
  line-height:    1.4;
  border-top:     1px solid var(--office-rule-cream);
  padding-top:    10px;
}

/* ----- Office mobile card spacing ----- */

.skin-office .alb-mobile-page .office-card { margin-bottom: 14px; }
.skin-office .alb-mobile-page .office-card:last-child { margin-bottom: 0; }

/* ----- Office mobile nav arrows (no circle) ----- */

body.skin-office .alb-mobile-indicator {
  color: var(--rose);
}

body.skin-office .alb-mobile-nav-btn {
  width:      auto;
  height:     auto;
  border:     none;
  background: transparent;
  color:      rgba(138, 166, 160, 0.5);
  font-size:  20px;
  padding:    8px;
}

body.skin-office .alb-mobile-nav-btn:hover {
  color: rgba(138, 166, 160, 0.9);
}

/* ----- Footer right zone (sign out + mode trigger) ----- */

.alb-footer-right {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.alb-footer-signout {
  font-family:    var(--sans);
  font-size:      9px;
  font-weight:    300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--slate-muted);
  opacity:        0.22;
  text-decoration: none;
  cursor:         pointer;
  transition:     opacity 0.2s;
  user-select:    none;
}

.alb-footer-signout:hover {
  opacity: 0.55;
}

/* ----- Office view desktop type scale ----- */

@media (min-width: 900px) {
  .office-entry-tagline { font-size: 18px; }
  .office-domain-label  { font-size: 14px; letter-spacing: 0.18em; }
  .office-card-moment   { font-size: 13px; letter-spacing: 0.16em; }
  .office-card-name     { font-size: 26px; }
  .office-card-desc     { font-size: 16px; }
  .office-card-wince    { font-size: 14px; }
}

/* BRIEF-145: Hide mobile credit block on desktop. The desktop has .site-footer
   which is the only footer that should render at >=900px. */
@media (min-width: 900px) {
  .alb-mobile-credit { display: none; }
}

/* Office footer: no Boss Mode trigger. */
body.skin-office #boss-mode-trigger { display: none; }