/* #115 Focus management & skip-links */
.fcm{
  background:var(--ax-background-default);
  border:1px solid var(--ax-border-subtle);
  border-radius:var(--ax-radius-xl);
  overflow:hidden;
  box-shadow:var(--ax-shadow-sm);
}
.fcm__head{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
  padding:18px 20px;
  border-bottom:1px solid var(--ax-border-subtle);
  background:linear-gradient(180deg,var(--ax-background-default),var(--ax-background-page));
}
.fcm__brand{ display:flex; gap:12px; align-items:center;}
.fcm__logo{
  width:40px; height:40px; border-radius:10px;
  background:var(--ax-brand-emphasis); color:var(--ax-brand-inverted);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ax-font-mono); font-weight:700; font-size:11px;
}
.fcm__title{ font-size:14px; font-weight:600; color:var(--ax-text-heading);}
.fcm__sub{ font-size:11px; color:var(--ax-text-subtle); margin-top:2px;}
.fcm__meta{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle); text-align:right; line-height:1.55;}

.fcm__body{ display:grid; grid-template-columns:1.4fr 1fr; gap:0;}
.fcm__l{ padding:18px;}
.fcm__r{ padding:14px 16px; background:var(--ax-background-page); border-left:1px solid var(--ax-border-subtle);}

/* mock app showing skip-links + focus order */
.fcm__app{
  background:var(--ax-background-page);
  border:1px solid var(--ax-border-default);
  border-radius:var(--ax-radius-lg);
  overflow:hidden;
  position:relative;
}
.fcm__skip{
  position:absolute; top:8px; left:8px; z-index:10;
  display:flex; gap:6px;
}
.fcm__skip a{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  background:var(--ax-text-heading); color:var(--ax-background-default);
  font-family:var(--ax-font-mono); font-size:10px; font-weight:600;
  border-radius:var(--ax-radius-md);
  text-decoration:none;
  outline:3px solid var(--ax-warning-emphasis); outline-offset:2px;
  box-shadow:var(--ax-shadow-md);
}
.fcm__skip a small{ opacity:0.7; font-weight:400;}
.fcm__skip-cap{
  position:absolute; top:8px; right:14px;
  font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);
}

.fcm__app-grid{
  display:grid; grid-template-columns:160px 1fr 220px;
  margin-top:42px;
}
.fcm__app-nav{
  background:var(--ax-text-heading); color:var(--ax-background-default);
  padding:14px 12px;
  min-height:240px;
}
.fcm__app-nav-l{
  font-family:var(--ax-font-mono); font-size:9px; text-transform:uppercase;
  opacity:0.6; margin-bottom:8px;
}
.fcm__app-nav-i{
  display:flex; gap:8px; align-items:center;
  padding:5px 8px; border-radius:6px;
  font-size:11px; font-weight:500;
  position:relative;
}
.fcm__app-nav-i.is-on{ background:var(--ax-border-subtle); font-weight:600;}
.fcm__app-nav-i .fcm__seq{ position:absolute; right:6px;}

.fcm__app-main{
  background:var(--ax-background-default);
  padding:14px 16px;
  position:relative;
}
.fcm__app-main-h{
  display:flex; gap:8px; justify-content:space-between; align-items:center;
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--ax-border-subtle);
}
.fcm__app-main-t{ font-size:13px; font-weight:700; color:var(--ax-text-heading);}
.fcm__app-act{
  display:flex; gap:6px;
}
.fcm__app-btn{
  position:relative;
  padding:5px 10px; border-radius:5px;
  font-size:11px; font-weight:600;
  border:1px solid var(--ax-border-default);
  background:var(--ax-background-default);
  color:var(--ax-text-default);
}
.fcm__app-btn.p{ background:var(--ax-text-heading); color:var(--ax-background-default); border-color:var(--ax-text-heading);}
.fcm__app-btn.focused{ outline:3px solid var(--ax-warning-emphasis); outline-offset:2px; background:var(--ax-brand-faint);}

.fcm__app-form{
  display:grid; grid-template-columns:repeat(2,1fr); gap:8px;
  margin-top:8px;
}
.fcm__field{
  position:relative;
  padding:7px 10px;
  border:1px solid var(--ax-border-default);
  border-radius:5px;
  background:var(--ax-background-default);
  font-size:11px;
}
.fcm__field-l{ font-family:var(--ax-font-mono); font-size:9px; color:var(--ax-text-subtle); display:block; margin-bottom:2px;}
.fcm__field-v{ color:var(--ax-text-default);}

.fcm__seq{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--ax-brand-emphasis); color:var(--ax-brand-inverted);
  font-family:var(--ax-font-mono); font-size:9px; font-weight:700;
  outline:2px solid var(--ax-background-default);
}
.fcm__seq.b{ background:var(--ax-text-heading);}

.fcm__app-aside{
  background:var(--ax-background-page);
  padding:14px 12px;
  border-left:1px solid var(--ax-border-subtle);
}
.fcm__app-aside-l{ font-family:var(--ax-font-mono); font-size:9px; text-transform:uppercase; color:var(--ax-text-subtle); margin-bottom:8px;}
.fcm__app-aside-i{
  display:flex; gap:8px; align-items:center;
  padding:6px 8px; border-radius:5px;
  font-size:11px; color:var(--ax-text-default);
  background:var(--ax-background-default);
  margin-bottom:5px;
}

/* arrow indicator strip */
.fcm__legend{
  margin-top:12px;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);
}
.fcm__legend strong{ color:var(--ax-text-heading);}
.fcm__legend .lg-sw{ display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:middle; margin-right:4px;}
.fcm__legend .lg-sw.skip{ background:var(--ax-warning-emphasis); border:1px solid var(--ax-border-default);}
.fcm__legend .lg-sw.first{ background:var(--ax-brand-emphasis);}
.fcm__legend .lg-sw.next{ background:var(--ax-text-heading);}

/* right column · pieces */
.fcm__sec-h{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0 0 8px;
}
.fcm__sec-h:not(:first-child){ margin-top:18px;}
.fcm__sec-t{ font-size:12px; font-weight:700; color:var(--ax-text-heading);}
.fcm__sec-cap{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);}

.fcm__pat{
  background:var(--ax-background-default);
  border:1px solid var(--ax-border-subtle);
  border-radius:var(--ax-radius-md);
  padding:0;
  overflow:hidden;
}
.fcm__pat-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--ax-border-subtle);
}
.fcm__pat-row:last-child{ border-bottom:none;}
.fcm__pat-tag{
  font-family:var(--ax-font-mono); font-size:9px; font-weight:700;
  padding:2px 7px; border-radius:4px;
  background:var(--ax-brand-faint); color:var(--ax-brand-emphasis);
}
.fcm__pat-l strong{ display:block; font-size:11px; font-weight:700; color:var(--ax-text-heading);}
.fcm__pat-l small{ display:block; font-size:10px; color:var(--ax-text-secondary); margin-top:1px; line-height:1.45;}
.fcm__pat-c{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);}

.fcm__ring{
  background:var(--ax-background-default);
  border:1px solid var(--ax-border-subtle);
  border-radius:var(--ax-radius-md);
  padding:14px 12px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.fcm__ring-cell{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);
}
.fcm__ring-btn{
  width:80px; height:32px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600;
  background:var(--ax-text-heading); color:var(--ax-background-default);
}
.fcm__ring-btn.r1{ outline:2px solid var(--ax-brand-emphasis);}
.fcm__ring-btn.r2{ outline:3px solid var(--ax-warning-emphasis); outline-offset:2px;}
.fcm__ring-btn.r3{ outline:2px dashed var(--ax-brand-emphasis); outline-offset:3px;}

.fcm__foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 18px; border-top:1px solid var(--ax-border-subtle);
  background:var(--ax-background-page);
}
.fcm__foot-meta{ font-family:var(--ax-font-mono); font-size:10px; color:var(--ax-text-subtle);}
.fcm__btn{
  padding:6px 12px; border-radius:var(--ax-radius-md);
  border:1px solid var(--ax-border-default);
  background:var(--ax-background-default);
  color:var(--ax-text-default);
  font-size:12px; font-weight:600; cursor:pointer;
}
.fcm__btn.p{ background:var(--ax-text-heading); color:var(--ax-background-default); border-color:var(--ax-text-heading);}