/* PR #24 layout v3: fixed viewport, single-chain submenu tracks, sync overview, and collision-safe spacing. */
body.artery-view-open{overflow:hidden}
body.artery-view-open .view-layer{overflow:hidden}

.view-shell.is-artery-view{
  width:calc(100% - 20px);
  max-width:none;
  height:100vh;
  margin:0 auto;
  padding:6px 10px 10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.view-shell.is-artery-view>.back-button{
  flex:0 0 auto;
  align-self:flex-start;
  padding:1px 0 3px;
  font-size:12px;
}
.view-shell.is-artery-view>#view-content{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
.artery-page{
  height:100%;
  min-height:0;
  padding:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.artery-header{
  padding:0 0 4px;
  gap:18px;
  border-bottom-width:var(--hair-width,1.5px);
}
.artery-title-wrap .eyebrow{font-size:10px;letter-spacing:.12em}
.artery-title-wrap h2{margin:1px 0;font-size:21px;letter-spacing:-.025em}
.artery-intro{font-size:12px;line-height:1.35}
.artery-review{display:flex;align-items:baseline;gap:7px;padding-top:2px}
.artery-review small{font-size:9px}
.artery-review strong{font-size:11px}

.artery-workspace{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(270px,20vw,310px);
  align-items:stretch;
  gap:12px;
  padding-top:5px;
  overflow:hidden;
}
.artery-stage{
  min-height:0;
  height:100%;
  margin:0;
  overflow:hidden;
}
.artery-geometry{
  z-index:1;
  overflow:hidden;
}
.artery-relation,
.artery-flow-path,
.artery-sync-path{
  marker-start:none!important;
  marker-end:none!important;
}

/* Five approved endpoints remain unboxed. */
.artery-root{
  z-index:35;
  min-width:0;
  padding:3px 6px;
  border:0!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  text-align:center;
  text-shadow:
    -2px -2px 0 rgba(248,249,252,.96),
    2px -2px 0 rgba(248,249,252,.96),
    -2px 2px 0 rgba(248,249,252,.96),
    2px 2px 0 rgba(248,249,252,.96);
}
.artery-root .artery-node-label{
  overflow:visible;
  text-overflow:clip;
  font-size:19px;
  font-weight:900;
  line-height:1.05;
}
.artery-root .artery-node-state{display:none}
.artery-root-role{margin-top:2px;font-size:10px;white-space:nowrap}
.artery-root:hover .artery-node-label,
.artery-root:focus-visible .artery-node-label,
.artery-root.is-expanded .artery-node-label{
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* First-level root groups align to the same outer edge and never scroll. */
.artery-branch{
  display:none;
  gap:7px;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  max-height:none!important;
  overflow:visible!important;
}
.artery-branch.is-expanded,
.artery-branch.is-hover-preview{display:grid}

.artery-branch--cloud{
  top:10%;
  left:6%;
  width:88%;
  grid-template-columns:minmax(220px,1fr) minmax(220px,1fr);
  column-gap:clamp(180px,20vw,360px);
  align-items:start;
}
.artery-cloud-group{
  min-width:0;
  display:grid;
  gap:7px;
  align-content:start;
}
.artery-branch--xs-codex{
  left:6%;
  top:39%;
  width:22%;
}
.artery-branch--ai-account{
  right:6%;
  top:39%;
  width:22%;
}
.artery-branch--git{
  left:27%;
  bottom:9%;
  width:46%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:9px;
}
.artery-branch--notion{left:41%;width:18%}
.artery-branch--notion-top{top:31%}
.artery-branch--notion-bottom{top:60%}

.artery-branch-row,
.artery-nested-row{
  position:relative;
  min-width:0;
  border-bottom:0;
}
.artery-node-item{
  min-height:37px;
  padding:8px 10px;
  border:var(--hair-width,1.5px) solid rgba(201,71,85,.30);
  border-radius:10px;
  background:rgba(248,249,252,.91);
  box-shadow:0 5px 14px rgba(16,36,58,.035);
}
.artery-node-label{font-size:13px;line-height:1.25}
.artery-node-state{font-size:9px}
.artery-node-toggle{
  flex:0 0 auto;
  margin-left:5px;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
  line-height:1;
}
.artery-node-item:hover,
.artery-node-item:focus-visible{border-color:rgba(6,118,191,.48)}

/* Nested directories form one tracked chain per root. */
.artery-branch.is-expanded .artery-nested-list,
.artery-branch.is-hover-preview .artery-nested-list{display:none}
.artery-branch-row.is-individually-expanded>.artery-nested-list,
.artery-nested-row.is-individually-expanded>.artery-nested-list{display:grid}
.artery-nested-list.is-track-panel{
  position:fixed!important;
  z-index:30;
  grid-template-columns:repeat(var(--submenu-columns,1),minmax(0,1fr));
  gap:6px;
  margin:0!important;
  padding:8px;
  border:1px solid rgba(6,118,191,.24);
  border-radius:10px;
  background:rgba(248,249,252,.985);
  box-shadow:0 16px 38px rgba(16,36,58,.16);
  overflow:visible;
  transform:none!important;
}
.artery-nested-list.is-track-panel::before{
  content:"";
  position:absolute;
  inset:-4px;
  z-index:-1;
  border-radius:13px;
  background:rgba(248,249,252,.45);
}
.artery-node-item--nested{
  min-height:31px;
  padding:6px 8px;
  border:1px solid rgba(6,118,191,.16);
  border-radius:7px;
  background:rgba(248,249,252,.78);
  box-shadow:none;
}
.artery-node-item--nested .artery-node-label{
  font-size:12px;
  line-height:1.35;
  white-space:normal;
}
.artery-nested-list.is-track-panel .artery-nested-list{display:none}
.artery-nested-list.is-track-panel .is-individually-expanded>.artery-nested-list{display:grid}

/* Fixed right rail. The detail area is shorter; controls and copy are larger. */
.artery-side-panel{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(145px,190px) auto auto auto auto;
  align-content:start;
  gap:9px;
  padding-left:12px;
  border-left:var(--line-width,2px) solid var(--line);
  overflow:hidden;
}
.artery-detail{
  position:relative;
  inset:auto;
  align-self:start;
  width:auto;
  min-height:145px;
  max-height:190px;
  overflow:auto;
  padding:13px 14px;
  border:var(--hair-width,1.5px) solid var(--hair);
  background:rgba(248,249,252,.82);
  box-shadow:none;
}
.artery-detail[hidden]{display:block}
.artery-detail-close{display:none}
.artery-detail-head{padding-bottom:8px}
.artery-detail-head h3{font-size:19px}
.artery-detail-body{gap:9px;padding-top:9px}
.artery-detail-row small{font-size:10px}
.artery-detail-row p,
.artery-detail-placeholder{
  margin:3px 0 0;
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}
.artery-detail-link{font-size:13px}
.artery-side-label{
  margin:0;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}

.artery-flow-toolbar{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  padding:0;
  border-bottom:0;
}
.artery-flow-button,
.artery-sync-button{
  justify-content:flex-start;
  min-height:38px;
  padding:7px 9px;
  gap:7px;
  border:1px solid rgba(201,71,85,.20);
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.artery-flow-index{font-size:10px}
.artery-flow-button.is-active{background:rgba(255,255,255,.62)}
.artery-sync-button{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  border-color:rgba(6,118,191,.25);
}
.artery-sync-button small{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}
.artery-sync-button.is-active{
  border-color:var(--blue);
  background:rgba(255,255,255,.68);
}
.artery-sync-dots{display:inline-flex;gap:3px}
.artery-sync-dot{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
}
.artery-sync-dot--flash{background:#c54d8b}
.artery-sync-dot--gardener{background:#43aa63}

.artery-global-controls{display:grid;gap:6px}
.artery-global-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.artery-global-buttons button{
  min-height:38px;
  border:1px solid rgba(6,118,191,.24);
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.artery-global-buttons button:hover,
.artery-global-buttons button:focus-visible{
  border-color:var(--blue);
  color:var(--blue);
  outline:none;
}
.artery-footer{
  display:grid;
  gap:6px;
  padding:7px 0 0;
  border-top:var(--hair-width,1.5px) solid var(--hair);
}
.artery-legend{gap:7px 11px}
.artery-legend-item{font-size:11px}
.artery-status-copy{
  max-width:none;
  margin:0;
  font-size:12px;
  line-height:1.45;
  text-align:left;
}

/* Collaboration lines remain provisional while the layout is being stabilized. */
.artery-flow-path{
  stroke-width:2.35;
  filter:drop-shadow(0 0 2px rgba(6,118,191,.18));
}

/* Sync mode: same colour means the same synchronization status. */
.artery-sync-path{
  fill:none;
  stroke-width:3;
  vector-effect:non-scaling-stroke;
  opacity:.96;
}
.artery-sync-path--flash{
  stroke:#c54d8b;
  filter:drop-shadow(0 0 3px rgba(197,77,139,.28));
}
.artery-sync-path--gardener{
  stroke:#43aa63;
  filter:drop-shadow(0 0 3px rgba(67,170,99,.28));
}
.artery-page.is-sync-mode .artery-relation{opacity:.16}
.artery-node-item.is-sync-flash{
  border-color:#c54d8b;
  background:rgba(197,77,139,.09);
  box-shadow:0 0 0 2px rgba(197,77,139,.11);
}
.artery-node-item.is-sync-gardener{
  border-color:#43aa63;
  background:rgba(67,170,99,.09);
  box-shadow:0 0 0 2px rgba(67,170,99,.11);
}
.artery-root.is-sync-flash .artery-node-label{color:#c54d8b}
.artery-root.is-sync-gardener .artery-node-label{color:#2f8d4c}

@media(max-width:1180px){
  .view-shell.is-artery-view{width:calc(100% - 12px);padding-inline:6px}
  .artery-workspace{grid-template-columns:minmax(0,1fr) 270px;gap:8px}
  .artery-branch--cloud{left:5%;width:90%;column-gap:clamp(120px,15vw,230px)}
  .artery-branch--xs-codex{left:5%;width:23%}
  .artery-branch--ai-account{right:5%;width:23%}
}
@media(max-width:900px){
  .artery-workspace{grid-template-columns:minmax(0,1fr) 250px}
  .artery-side-panel{padding-left:8px}
  .artery-node-label{font-size:12px}
  .artery-flow-button,
  .artery-sync-button,
  .artery-global-buttons button{font-size:12px}
}