/* =======================================
   NEW unified button styles
======================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 1.75rem;min-height:40px;height:40px;border-radius:var(--radius-button, 20px);
  font-family:'Roboto',sans-serif;font-size:16px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  user-select:none;white-space:nowrap
}
.btn .button-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn--pill{border-radius:var(--radius-button, 20px)}

/* CTA (orange) */
.btn--cta{background:var(--base);color:var(--background)}
.btn--cta:hover{background:var(--action-light)}
.btn--cta:active{background:var(--action-dark)}
.btn--cta:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(250,121,31,.35)}

/* Directional (black) */
.btn--directional{background:var(--ink);color:var(--background)}
.btn--directional:hover{background:var(--ghost-base)}
.btn--directional:active{background:var(--ghost-dark)}
.btn--directional:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,0,0,.35)}

/* Secondary */
.btn--secondary.is-solid{background:var(--ink);color:var(--background)}
.btn--secondary.is-solid:hover{background:var(--ghost-ultra-dark)}
.btn--secondary.is-solid:active{background:var(--ghost-extra-dark)}
.btn--secondary.is-outline{background:var(--background);color:var(--ink);border-color:var(--ink)}
.btn--secondary.is-outline:hover{background:var(--ink);color:var(--background)}
.btn--secondary.is-outline:active{background:var(--ghost-extra-dark);color:var(--background)}
.btn--secondary.is-ghost{background:var(--background);color:var(--ink);border-color:var(--ghost-extra-light)}
.btn--secondary.is-ghost:hover{background:var(--ghost-super-light)}
.btn--secondary.is-ghost:active{background:var(--ghost-ultra-light)}
.btn--secondary:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(32,33,36,.25)}

/* Private (teal) */
.btn--private{background:var(--primary-ultra-light);color:var(--ink)}
.btn--private:hover{background:var(--primary-extra-light)}
.btn--private:active{background:var(--primary-light)}
.btn--private:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(0,153,153,.30)}

/* Disabled */
.btn.is-disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.pill-button.is-disabled, .pill-button[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* Size lock (per spec) — but NOT on icon or text buttons */
.btn:not(.btn--icon):not(.btn--text), .btn--pill:not(.btn--icon){
  min-width:160px;
  max-width:250px;
  width: fit-content;
}

/* ===================================================
   Round Icon Button (32x32) with 3 options
   Options map:
     - glass  : transparent bg, transparent border, black icon
     - light  : white bg, black border, black icon
     - dark   : black bg, white border, white icon
=================================================== */
.btn--icon{
  --_size: 32px;
  width: var(--_size);
  height: var(--_size);
  min-width: var(--_size);
  max-width: var(--_size);
  min-height: var(--_size);
  padding: 0;
  border-radius: var(--radius-full, 9999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  line-height: 1;
}
.btn--icon .ico{ display:inline-flex }
/* Smooth rotation for inline SVG icons inside icon buttons */
.btn--icon .ico svg{ transition: transform .2s ease; transform: rotate(0deg); transform-origin: 50% 50%; }
/* When toggled, rotate to the angle provided via --btn-rot (default 180deg) */
.btn--icon.is-on .ico svg{ transform: rotate(var(--btn-rot, 180deg)); }

/* Option: glass (transparent) */
.btnopt--glass{
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}
.btnopt--glass:hover{ background: var(--ghost-super-light) }
.btnopt--glass:active{ background: var(--ghost-ultra-light) }

/* Option: light (white) */
.btnopt--light{
  background: var(--background);
  border-color: var(--ink);
  color: var(--ink);
}
.btnopt--light:hover{ background: var(--ghost-super-light) }
.btnopt--light:active{ background: var(--ghost-ultra-light) }

/* Option: dark (black) */
.btnopt--dark{
  background: var(--ink);
  /* Remove visible white ring around icon button */
  border-color: transparent;
  color: var(--background);
}
.btnopt--dark:hover{ background: var(--ghost-base) }
.btnopt--dark:active{ background: var(--ghost-dark) }

/* Accessibility helper for icon-only buttons */
.sr-only{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===================================================
   Legacy styles (so old callers still look OK)
=================================================== */
.pill-button{
  display:flex;min-width:160px;
  max-width:250px;
  width: fit-content;
  min-height:40px;height:40px;
  padding:0 1.75rem;justify-content:center;align-items:center;border-radius:var(--radius-button, 20px);
  background:var(--base);color:var(--background);font-family:'Roboto',sans-serif;font-size:16px;
  border:1px solid transparent;overflow:hidden;cursor:pointer;transition:background .3s,color .3s;text-decoration:none
}
.b-o{color:var(--background);background:var(--base)}
.b-o:hover{background:var(--action-light)}
.b-b{color:var(--background);background:var(--ink)}
.b-b:hover{background:var(--ghost-base)}
.b-w{color:var(--ink);background:var(--background);border:1px solid var(--ink)}
.b-w:hover{color:var(--background);background:var(--ink)}
.b-p{color:var(--ink);background:var(--primary-ultra-light)}
.b-p:hover{color:var(--ink);background:var(--primary-extra-light)}

/* ===================================================
   Text buttons (no background) – underline | chevron-left
=================================================== */
.btn--text{
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 0;
  height: auto;
  min-height: 0;
  border-radius: var(--radius-none, 0px);
  gap: 8px;
}
.btn--text .button-text{ text-decoration: underline; }
/* Apply underline at both container and text span for robustness */
.btn--text.btntext--underline{ text-decoration: underline; text-underline-offset: 2px; }
.btn--text.btntext--underline .button-text{ text-decoration: underline; text-underline-offset: 2px; }
.btn--text:hover{ color: var(--ghost-dark); }
.btn--text:active{ opacity: .85; }
.btn--text .ico{ display:inline-flex; line-height:0; }