/* Quiet depth for the two navigation controls; the catalog keeps its open grid. */
.guide-v5{
  --tactile-surface-top:#fffefa;
  --tactile-surface-bottom:#f3f4ee;
  --tactile-edge:#dce1d8;
  --tactile-selected-edge:#b3c1b0;
  --tactile-highlight:#ffffffd9;
  --tactile-shadow:#273b2810;
  --tactile-selected-top:#f2f5eb;
  --tactile-selected-bottom:#e7eddf;
  --tactile-marker:#456046;
}

/* A narrow, rounded strip with a lit edge and a soft contact shadow. */
.guide-v5 .ribbon .color-material{
  width:11px;
  height:47px;
  border-radius:1px 1px 5px 4px;
  background:
    linear-gradient(90deg,#ffffff42,transparent 34%,#20342a12 100%),
    radial-gradient(ellipse at 85% 0,var(--nav-light),transparent 80%),
    var(--nav-rich);
  box-shadow:inset 1px 0 0 #ffffff70,inset -1px 0 0 #243f2916,inset 0 -1px 1px #183c2528,1px 3px 3px -2px #1d392744;
  transform-origin:50% 0;
  transition:height 520ms cubic-bezier(.2,.85,.28,1.18),width 420ms ease,transform 520ms cubic-bezier(.2,.85,.28,1.18),box-shadow 420ms ease;
}
.guide-v5 .ribbon .color-item[aria-pressed="true"] .color-material{
  height:calc(100% - 14px);
  width:11px;
  border-radius:1px 1px 5px 4px;
}
.guide-v5 .ribbon .color-item:focus-visible{
  outline:2px solid #58755f;
  outline-offset:5px;
  border-radius:5px;
}
.guide-v5 .ribbon .color-item:focus-visible .color-material{
  height:58px;
  transform:scaleX(1.06);
}
.guide-v5 .ribbon .color-item[aria-pressed="true"]:focus-visible .color-material{height:calc(100% - 14px)}

/* Individual, shallow surfaces make the three starting modes feel selectable. */
.guide-v5 .effort-options{
  gap:12px;
  border:0;
}
.guide-v5 .effort-options .effort-option{
  min-height:107px;
  padding:22px 18px;
  border:1px solid var(--tactile-edge);
  border-radius:12px;
  background:linear-gradient(170deg,var(--tactile-surface-top),var(--tactile-surface-bottom));
  box-shadow:inset 0 1px 0 var(--tactile-highlight),0 2px 3px -2px var(--tactile-shadow);
  transition:transform 400ms cubic-bezier(.2,.8,.25,1),box-shadow 400ms ease,border-color 400ms ease;
}
.guide-v5 .effort-options .effort-option[aria-pressed="true"]{
  border-color:var(--tactile-selected-edge);
  background:linear-gradient(160deg,var(--tactile-selected-top),var(--tactile-selected-bottom));
  box-shadow:inset 0 1px 0 var(--tactile-highlight),0 2px 4px -2px var(--tactile-shadow);
}
.guide-v5 .effort-options .effort-option[aria-pressed="true"]::after{
  left:-1px;
  right:auto;
  top:25px;
  bottom:25px;
  width:3px;
  height:auto;
  border-radius:0 3px 3px 0;
  background:var(--tactile-marker);
}
.guide-v5 .effort-options .effort-option:focus-visible{
  outline:2px solid #58755f;
  outline-offset:4px;
}
.guide-v5 .effort-option .effort-meta i{transition:transform 420ms cubic-bezier(.22,.8,.25,1),opacity 420ms ease}
.guide-v5 .effort-option:hover .effort-meta i{transition:transform 420ms cubic-bezier(.22,.8,.25,1),opacity 420ms ease}

html[data-color-mode="dark"] .guide-v5{
  --tactile-surface-top:#29312c;
  --tactile-surface-bottom:#222925;
  --tactile-edge:#39443c;
  --tactile-selected-edge:#687a65;
  --tactile-highlight:#d8e8d513;
  --tactile-shadow:#00000066;
  --tactile-selected-top:#333e32;
  --tactile-selected-bottom:#293529;
  --tactile-marker:#b7c9ad;
}
html[data-color-mode="dark"] .guide-v5 .effort-options .effort-option{
  border-color:var(--tactile-edge);
  background:linear-gradient(170deg,var(--tactile-surface-top),var(--tactile-surface-bottom));
}
html[data-color-mode="dark"] .guide-v5 .effort-options .effort-option[aria-pressed="true"]{
  border-color:var(--tactile-selected-edge);
  background:linear-gradient(160deg,var(--tactile-selected-top),var(--tactile-selected-bottom));
}
html[data-color-mode="dark"] .guide-v5 .effort-options .effort-option[aria-pressed="true"]::after{background:var(--tactile-marker)}
html[data-color-mode="dark"] .guide-v5 .ribbon .color-material{
  box-shadow:inset 1px 0 0 #ffffff60,inset -1px 0 0 #14342330,inset 0 -1px 1px #14342344,1px 3px 4px -1px #00000080;
}

@media(hover:hover) and (pointer:fine){
  .guide-v5 .ribbon .color-item:hover .color-material{
    height:58px;
    transform:scaleX(1.06) rotate(-.7deg);
    box-shadow:inset 1px 0 0 #ffffff70,inset -1px 0 0 #243f2916,inset 0 -1px 1px #183c2528,2px 5px 5px -3px #1d392750;
  }
  .guide-v5 .ribbon .color-item[aria-pressed="true"]:hover .color-material{height:calc(100% - 14px)}
  .guide-v5 .effort-options .effort-option:hover{
    transform:translateY(-2px);
    border-color:var(--tactile-selected-edge);
    box-shadow:inset 0 1px 0 var(--tactile-highlight),0 5px 9px -6px var(--tactile-shadow);
  }
  html[data-color-mode="dark"] .guide-v5 .effort-options .effort-option:hover{border-color:var(--tactile-selected-edge)}
}
.guide-v5 .ribbon .color-item:active .color-material{transform:scaleX(1.08) scaleY(.97)}
.guide-v5 .effort-options .effort-option:active{transform:translateY(0);transition-duration:100ms}

@media(max-width:1100px){
  .guide-v5 .effort-options{gap:9px}
  .guide-v5 .effort-options .effort-option{min-height:85px;padding:18px 16px}
  .guide-v5 .effort-options .effort-option[aria-pressed="true"]::after{top:20px;bottom:20px}
}
@media(prefers-reduced-motion:reduce){
  .guide-v5 .ribbon .color-material,
  .guide-v5 .effort-options .effort-option,
  .guide-v5 .effort-option .effort-meta i{transition:none}
  .guide-v5 .ribbon .color-item:is(:hover,:focus-visible,:active) .color-material{height:47px;transform:none}
  .guide-v5 .ribbon .color-item[aria-pressed="true"]:is(:hover,:focus-visible,:active) .color-material{height:calc(100% - 14px)}
  .guide-v5 .effort-options .effort-option:is(:hover,:active),
  .guide-v5 .effort-option:hover .effort-meta i{transform:none;transition:none}
}