/* Final Home visual layer.
   Uses the approved generated WebP files directly from /public/v4. */

/* Sidebar: keep the practice-room scene visible, but move the crop toward
   the lamp / plant / amp side instead of losing it behind the narrow rail. */
.gc-sidebar{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(3,13,11,.70) 0%,rgba(3,13,11,.42) 40%,rgba(3,12,10,.30) 68%,rgba(2,8,7,.80) 100%),
    linear-gradient(90deg,rgba(2,10,8,.22),rgba(2,10,8,.02)),
    url('/v4/gc-sidebar-final.webp') 32% bottom/cover no-repeat!important;
  border-right:1px solid rgba(125,238,199,.11)!important;
}
.gc-sidebar::before,
.gc-sidebar::after{display:none!important}
.gc-sidebar>*{position:relative;z-index:1}
.gc-sidebar .gc-nav--settings{margin-top:auto!important;padding-bottom:22px}

/* The guitar photo is no longer a rectangular hero image. It becomes an
   atmospheric background for the upper part of Home and fades into the app. */
.gc-home-page,
.gc-first-use{
  position:relative!important;
  isolation:isolate!important;
}
.gc-home-page::before,
.gc-first-use::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;
  right:min(-44px, calc((1344px - 100vw + var(--sidebar-w)) / 2));
  left:6%;
  width:auto;
  height:470px;
  opacity:.94;
  background:
    linear-gradient(90deg,#07110f 0%,rgba(7,17,15,.90) 10%,rgba(7,17,15,.52) 26%,rgba(7,17,15,.12) 52%,rgba(7,17,15,.02) 82%),
    linear-gradient(180deg,#07110f 0%,rgba(7,17,15,.35) 8%,rgba(7,17,15,.06) 18%,rgba(7,17,15,.08) 42%,rgba(7,17,15,.55) 72%,#07110f 100%),
    url('/v4/gc-hero-final.webp') 72% 45%/cover no-repeat;
  filter:saturate(.96) contrast(1.03);
}
.gc-home-page>*,
.gc-first-use>*{
  position:relative!important;
  z-index:1!important;
}

/* Disable older hero-local decorations: the page background above replaces them. */
.gc-home-page .gc-home-hero,
.gc-first-use .gc-first-use__hero{
  position:relative!important;
  isolation:auto!important;
  overflow:visible!important;
}
.gc-home-page .gc-home-hero::before,
.gc-home-page .gc-home-hero::after,
.gc-first-use .gc-first-use__hero::before,
.gc-first-use .gc-first-use__hero::after{
  display:none!important;
}

/* First use: one decision, two real choices, one low-emphasis escape hatch. */
.gc-first-use .gc-activation-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
  max-width:780px!important;
  gap:14px!important;
}
.gc-first-use .gc-activation-card[data-action="start-example"]{display:none!important}
.gc-first-use .gc-activation-card,
.gc-first-use .gc-activation-card--primary{
  grid-column:auto!important;
  min-height:150px!important;
}
.gc-first-use .gc-log-practice-section{
  margin:12px 0 0!important;
  padding:0!important;
  max-width:780px!important;
}
.gc-first-use .gc-log-practice-card{
  width:auto!important;
  min-height:auto!important;
  padding:6px 2px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text-2)!important;
  display:inline-flex!important;
  gap:7px!important;
}
.gc-first-use .gc-log-practice-card::before{
  content:'Already practiced?';
  color:var(--text-3);
  font-size:13px;
  font-weight:500;
}
.gc-first-use .gc-log-practice-card .gc-action-copy{display:block!important}
.gc-first-use .gc-log-practice-card .gc-action-copy strong{display:none!important}
.gc-first-use .gc-log-practice-card .gc-action-copy span{
  color:var(--accent)!important;
  font-size:0!important;
  font-weight:750!important;
}
.gc-first-use .gc-log-practice-card .gc-action-copy span::before{
  content:'Log a past session';
  font-size:13px!important;
}
.gc-first-use .gc-log-practice-card .gc-chevron{display:none!important}
.gc-first-use .gc-first-use__note{margin-top:10px!important}
.gc-first-use-photo{display:none!important}

@media(max-width:1000px){
  .gc-home-page::before,
  .gc-first-use::before{
    top:0;
    right:-18%;
    width:105%;
    height:410px;
    opacity:.78;
    background-position:center,center,68% 45%;
  }
}

/* Respect the app's mobile shell: desktop sidebar disappears at the same
   breakpoint used by the native bottom navigation. */
@media(max-width:900px){
  .gc-sidebar{display:none!important}
  .gc-home-page,
  .gc-first-use{overflow-x:clip}
}

@media(max-width:700px){
  .gc-home-page::before,
  .gc-first-use::before{
    top:0;
    left:auto;
    right:-46%;
    width:138%;
    height:300px;
    opacity:.48;
    background-position:center,center,64% 44%;
  }
  .gc-first-use .gc-activation-grid{grid-template-columns:1fr!important}
  .gc-first-use .gc-activation-card,
  .gc-first-use .gc-activation-card--primary{min-height:112px!important}
}


/* Dedicated first-use: no app chrome, two choices + skip. */
.gc-first-use-shell{min-height:100dvh;background:#07110f;overflow:hidden}
.gc-first-use-main{min-height:100dvh}
.gc-first-use{min-height:100dvh;max-width:1180px!important;margin:0 auto!important;padding:36px 42px 56px!important}
.gc-first-use__brand{position:relative;z-index:2;width:190px;margin-bottom:48px}
.gc-first-use__brand img{display:block;width:100%;height:auto}
.gc-first-use .gc-first-use__hero{min-height:250px!important;max-width:720px!important}
.gc-first-use .gc-first-use__hero .gc-heading{max-width:650px}
.gc-first-use .gc-first-use__hero .gc-subtitle{max-width:430px;margin-top:10px;color:var(--text-2)}
.gc-first-use .gc-activation-grid{grid-template-columns:1.08fr .92fr!important;max-width:820px!important}
.gc-first-use .gc-activation-card,.gc-first-use .gc-activation-card--primary{min-height:154px!important}
.gc-first-use__skip{display:inline-flex;margin:18px 4px 0!important;color:var(--text-3)!important;font-weight:700}
.gc-first-use__skip:hover{color:var(--accent)!important}
.gc-first-use .gc-log-practice-section{display:none!important}

@media(max-width:700px){
  .gc-first-use{padding:24px 18px 40px!important}
  .gc-first-use__brand{width:156px;margin-bottom:34px}
  .gc-first-use .gc-first-use__hero{min-height:210px!important}
  .gc-first-use .gc-activation-grid{grid-template-columns:1fr!important}
  .gc-first-use .gc-activation-card,.gc-first-use .gc-activation-card--primary{min-height:112px!important}
}


/* Practice-first Home: Start + Log form one aligned action group.
   The large accent card is reserved for a real Resume state. */
.gc-home-page .gc-home-dashboard:has(>div:first-child:empty){margin-top:0!important}
.gc-home-page .gc-home-dashboard>div:first-child:empty{display:none!important}
.gc-home-page .gc-home-quick-actions{margin-top:14px!important}
.gc-home-page .gc-home-quick-actions__grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;gap:12px!important}
.gc-home-page .gc-home-quick-actions .gc-home-start-card,
.gc-home-page .gc-home-quick-actions .gc-log-practice-card{
  min-height:88px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
}
.gc-home-page .gc-home-quick-actions .gc-home-start-card{
  border-color:rgba(89,225,176,.30)!important;
  background:linear-gradient(135deg,rgba(19,73,57,.86),rgba(8,35,28,.86))!important;
  box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
}
.gc-home-page .gc-home-quick-actions .gc-home-start-card .gc-action-copy strong{font-size:18px!important}
.gc-home-page .gc-home-quick-actions .gc-home-start-card .gc-action-icon{background:rgba(89,225,176,.15)!important;color:var(--accent)!important}
.gc-home-page .gc-home-quick-actions .gc-log-practice-card{background:rgba(8,25,21,.74)!important;border-color:rgba(255,255,255,.09)!important}
.gc-home-page .gc-home-add-item-link{margin:10px 4px 0!important}
.gc-home-page .gc-home-add-item-link .gc-link{font-size:12px!important;color:var(--text-3)!important}
.gc-home-page .gc-home-pickup--hero{margin-bottom:0!important}
@media(max-width:700px){
  .gc-home-page .gc-home-quick-actions__grid{grid-template-columns:1fr!important}
  .gc-home-page .gc-home-quick-actions .gc-home-start-card,
  .gc-home-page .gc-home-quick-actions .gc-log-practice-card{min-height:76px!important}
  .gc-home-page .gc-home-quick-actions .gc-home-start-card{
    grid-template-columns:42px minmax(0,1fr) auto!important;
  }
  .gc-home-page .gc-home-quick-actions .gc-home-start-card .gc-action-icon{display:grid!important;width:42px!important;height:42px!important;flex-basis:42px!important}
}


/* UX cleanup 2026-09-18 */
.gc-exercise-grid>.gc-empty{grid-column:1/-1;width:100%;min-height:104px;display:grid;place-items:center}
.gc-routine-quick-grid>.gc-routine-empty-line{
  grid-column:1/-1;width:100%;min-height:104px;display:grid;place-items:center;
  padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(145deg,var(--surface-2),var(--surface-1));color:var(--text-3)
}
.gc-home-page .gc-save-practice{margin-bottom:22px!important}
.gc-practice-pause.is-resume{
  border-color:rgba(89,225,176,.34)!important;
  background:rgba(89,225,176,.13)!important;
  color:var(--accent)!important;
}
.gc-practice-pause.is-resume svg{color:var(--accent)}
@media(max-width:620px){
  .gc-home-page .gc-save-practice{margin-bottom:26px!important}
  .gc-home-page .gc-save-practice .gc-action-card{min-height:92px!important}
  .gc-home-page .gc-home-hero--compact{padding-top:10px!important}
}

/* Recent practice: session-type icons with an implicit color legend.
   Songs = amber, Exercises = mint, Other = violet, multi-item = blue,
   routine = filled mint play, free = neutral. */
.gc-row__icon svg{width:18px;height:18px}
.gc-row__icon--songs{background:rgba(240,179,95,.13)!important;color:#f0b35f!important}
.gc-row__icon--exercises{background:rgba(89,225,176,.12)!important;color:#59e1b0!important}
.gc-row__icon--other{background:rgba(183,165,247,.13)!important;color:#b7a5f7!important}
.gc-row__icon--session{background:rgba(124,196,240,.13)!important;color:#7cc4f0!important}
.gc-row__icon--routine{background:linear-gradient(135deg,#62e7b7,#31c492)!important;color:#0b1714!important}
.gc-row__icon--routine svg{fill:#0b1714}
.gc-row__icon--free{background:rgba(255,255,255,.05)!important;color:#9fb6ae!important}
.gc-recent-row{grid-template-columns:42px minmax(0,1fr)!important;align-items:start!important}
.gc-recent-row .gc-row__icon{margin-top:2px}
.gc-recent-row__body{min-width:0}
.gc-recent-row__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.gc-recent-row__top .gc-row__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-recent-row__date{flex:0 0 auto;font-size:12px;color:var(--text-3);white-space:nowrap}
.gc-recent-row__note{margin-top:5px;font-size:12px;font-style:italic;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-recent-items{margin-top:7px;display:grid;gap:3px}
.gc-recent-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.gc-recent-item__name{flex:1;min-width:0;font-size:12.5px;color:rgba(255,255,255,.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-recent-item__meta{flex:0 0 auto;font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;font-variant-numeric:tabular-nums}
.gc-recent-item--more{font-size:11.5px;color:rgba(255,255,255,.5)}
.gc-load-more{width:100%;margin-top:10px;min-height:46px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);color:var(--text-2);font:inherit;font-weight:700;cursor:pointer}
.gc-load-more:hover{border-color:var(--border-strong);color:var(--text)}
.gc-load-more__count{color:var(--text-3);font-weight:600}
.gc-run-detail__note{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--text-2);font-style:italic}
.gc-home-page .gc-recent-row .gc-row__meta{font-size:12px!important;color:rgba(255,255,255,.65)!important}