/* Flynn Solutions — metal button
 *
 * This is approach 7 from the exploration, unchanged: a plate rendered through
 * the matcap pipeline that shaded the mark, stretched to the button's box.
 *
 * Why stretch rather than nine-slice: border-image stretches only the MIDDLE
 * region, so the plate's vertical detail collapses into one flat band and you
 * get a grey bar across the face. Stretching the whole plate scales the
 * horizon with the button instead, and the horizon is horizontal so it
 * survives. The corner radius distorts slightly on very wide buttons; at real
 * button proportions it is not visible.
 *
 * The plate is a rendered PNG, not a CSS gradient, so the surface carries the
 * same grain and horizon as the logo.
 */

.fs-btn{
  --fs-plate: url("plate-chrome.png");
  --fs-font: var(--font, Geist, Inter, sans-serif);

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px;
  border:none;
  border-radius:8px;
  cursor:pointer;

  font-family:var(--fs-font);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#12212e;
  text-shadow:0 1px 0 rgba(255,255,255,.72), 0 -1px 0 rgba(0,0,0,.22);

  background-image:var(--fs-plate);
  background-size:100% 100%;
  background-repeat:no-repeat;

  /* the plate supplies the surface; these supply the edge and the lift */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 1px 2px rgba(0,0,0,.45),
    0 4px 12px rgba(0,0,0,.42);

  -webkit-user-select:none; user-select:none;
  /* No transform on any state. Cory's call: the button should not lift or
     press. Feedback comes from the surface -- brightness and the shadow it
     casts -- which is also what real metal does when it catches more light. */
  transition:filter .18s ease, box-shadow .22s ease;
}

.fs-btn:hover{
  filter:brightness(1.13) contrast(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 2px 4px rgba(0,0,0,.45),
    0 9px 24px rgba(0,0,0,.55);
}
/* pressed reads as the surface dimming and sitting closer to the page, not moving */
.fs-btn:active{
  filter:brightness(.94) contrast(1.02);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(0,0,0,.4);
}
.fs-btn:focus-visible{ outline:2px solid #a8c8e4; outline-offset:3px; }

.fs-btn[disabled],.fs-btn.is-disabled{
  filter:grayscale(.75) brightness(.62);
  cursor:not-allowed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.5);
}

/* The ripple canvas, when button-ripple.js enhances the button. It draws the
   whole surface, so the CSS plate underneath is the no-WebGL fallback and is
   simply covered when the shader is running. */
.fs-btn__fx{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  border-radius:inherit;
  pointer-events:none;
}
/* NB: must not be `.fs-btn > *` -- that matches the canvas too, and since it
   has equal specificity and comes later it overrides position:absolute,
   dropping the canvas into flow and blowing the button apart. */
.fs-btn__label{ position:relative; z-index:2; display:inline-block; }

/* sizes ------------------------------------------------------------------ */
.fs-btn--sm{ padding:5px 12px; font-size:9.5px; border-radius:6px; }
.fs-btn--lg{ padding:11px 26px; font-size:13px; border-radius:10px; }

/* finishes --------------------------------------------------------------- */
.fs-btn--chrome   { --fs-plate:url("plate-chrome.png");    color:#12212e; }  /* the default */
.fs-btn--sterling { --fs-plate:url("plate-sterling.png");  color:#241f18; }
.fs-btn--gunmetal { --fs-plate:url("plate-gunmetal.png");
                    color:#e2eaf2;
                    text-shadow:0 -1px 0 rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.12); }
.fs-btn--bluesteel{ --fs-plate:url("plate-bluesteel.png"); color:#0c1c2b; }
.fs-btn--icesteel { --fs-plate:url("plate-icesteel.png");  color:#0d2130; }

/* On a light page a polished plate loses its silhouette, and chrome -- the
   default -- is the worst offender of the five. One dark ring fixes it without
   touching the surface. Add alongside the base class, or use --gunmetal, which
   is the only finish that needs no help on white. */
.fs-btn--seated{ box-shadow:
    0 0 0 1px rgba(11,17,23,.85),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(0,0,0,.50),
    0 4px 12px rgba(0,0,0,.30); }

/* SECOND TIER — the bracket. Variant 48 of the original exploration: rules above
   and below, no box. It cannot be mistaken for the chrome primary because it has
   no surface at all, and it reuses the rule motif the letterhead and card use.
   Metal on dark; ink on paper. */
.fs-btn-bracket{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border:none; background:none; cursor:pointer;
  font-family:var(--fs-font, Inter, sans-serif);
  font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; color:#e3e9ef;
  -webkit-user-select:none; user-select:none;
}
.fs-btn-bracket::before,
.fs-btn-bracket::after{
  content:""; position:absolute; left:0; right:0; height:1px; opacity:.65;
  background:linear-gradient(90deg,transparent,#c1d2ea 22%,#8ea0bc 50%,#c1d2ea 78%,transparent);
  transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.fs-btn-bracket::before{ top:0; }
.fs-btn-bracket::after { bottom:0; }
.fs-btn-bracket:hover::before{ opacity:1; transform:translateY(-2px); }
.fs-btn-bracket:hover::after { opacity:1; transform:translateY(2px); }
.fs-btn-bracket:focus-visible{ outline:2px solid #8fd4ff; outline-offset:4px; }

[data-theme="light"] .fs-btn-bracket,
.fs-btn-bracket.on-paper{ color:#2a251e; }
[data-theme="light"] .fs-btn-bracket::before, .fs-btn-bracket.on-paper::before,
[data-theme="light"] .fs-btn-bracket::after,  .fs-btn-bracket.on-paper::after{
  background:linear-gradient(90deg,transparent,#8a8375 22%,#262a35 50%,#8a8375 78%,transparent);
}

/* THIRD TIER — the quiet one. Deliberately NOT metal; one metal button per view,
   or the mark stops being special. */
.fs-btn-quiet{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 16px; border-radius:8px; cursor:pointer;
  font-family:var(--fs-font); font-weight:500; font-size:12px;
  letter-spacing:0; text-transform:none;
  color:#cfd8e2; background:transparent; border:1px solid #2b333c;
  transition:border-color .2s ease, color .2s ease;
}
.fs-btn-quiet:hover{ border-color:#4a5560; color:#eaf1f8; }